鼠标移动多选复选框

最新推荐文章于 2023-06-27 09:48:19 发布

原创最新推荐文章于 2023-06-27 09:48:19 发布 · 683 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#鼠标事件 #js #jQuery #复选框

这篇博客探讨了一个问题，即在文字拖拽后，鼠标多选复选框的功能失效。博主分享了一段HTML和JavaScript（使用jQuery库）的代码，通过监听鼠标按下和抬起事件，实现在特定区域内拖动鼠标时，选中或取消选中复选框的功能。代码中定义了一个id为'touchArea'的div，当鼠标在该区域内按下时，所有复选框在鼠标移过时将根据当前状态切换选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问一下大佬对文字拖拽之后就不好使了怎么破解

附：代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="js/jquery/jquery-2.1.4.min.js"></script>
<style type="text/css">

       ::selection {
          background: none; color:none;
          }

</style>
</head>
<body>
<div style="width:100%;" id="touchArea">
<input type="checkbox" name="" id="a1" value=""/><label for="a1">a1</label><br />
<input type="checkbox" name="" id="a2" value=""/><label for="a2">a2</label><br />
<input type="checkbox" name="" id="a3" value=""/><label for="a3">a3</label><br />
<input type="checkbox" name="" id="a4" value=""/><label for="a4">a4</label><br />
<input type="checkbox" name="" id="a5" value=""/><label for="a5">a5</label>
</div>
<script>
$(document).ready(function(){
   $("#touchArea").mousedown(function() {
   $("input").mouseover(function(){
       if($(this).is(':checked')){
                       $(this).removeAttr("checked");
                   }else{
                       $(this).prop("checked", true);
                   }
   });
});
   $("#touchArea").mouseup(function() {
   $("input").mouseover(function(){
       if($(this).is(':checked')){
                       $(this).removeAttr("checked");
                   }else{
                       $(this).prop("checked", true);
                   }
   });
});
})

</script>
</body>
</html>