How to implement all/unselect all checkboxes using js and jQuery

How to implement all/unselect all checkboxes using js and jQuery_javascript skills

WBOY

Release： 2016-05-16 15:21:39

Original

1221 people have browsed it

The example in this article describes the method of selecting/unselecting all checkboxes using js and jQuery. Share it with everyone for your reference, the details are as follows:

Let’s first take a look at how to use JavaScript to select/unselect all checkboxes. This should be a more practical front-end technique. Many times we need to click on a checkbox and then automatically select all the checkboxes. For example, in Sina Mailbox or in the background of some CMS systems, after using this JS effect, The operating experience is greatly enhanced, so how is this function implemented? Don't worry, follow me step by step to achieve it.

Let’s first make the lists with checkboxes. Before selecting or deselecting all, the state will look like this:

<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>

Copy after login

Then we put a Checkbox controlling the checkbox next to the list:

Select all:

Copy code The code is as follows:

The following is the JS code that is defined to be executed after clicking the all-selected checkBox. Use JS to traverse all checkboxes and change the status of the checkbox:

<script language="javascript">
 function sel(a){
 o=document.getElementsByName(a)
 for(i=0;i<o.length;i++)
 o[i].checked=event.srcElement.checked
 }
</script>

Copy after login

There is also a function to implement JS selection and reverse selection below. Just post the code and sort it out yourself.

<input type=checkbox name=m>
<input type=checkbox name=m>
<input type=checkbox name=m>

Copy after login

<!--放一个控制全选的按钮-->
全选<input type="checkbox" value="1" onclick="mm(this)">
<script language=javascript>
<!--JS部分-->
function mm(o)
{
  var a = document.getElementsByName("m");
  for (var i=0;i<a.length;i++){
    a[i].checked = o.checked;
  }
}
</script>

Copy after login

Choose one of the two methods, both are easier.

Now let’s introduce the jQuery method to select/unselect all checkboxes. Although it is easy to implement using JavaScript, the code is very troublesome.

Now let me introduce to you the specific operation method of using jQuery.

jQuery.attr Get/set the attribute value of the object, such as:

$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态（是否选中）
$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true

Copy after login

Another example:

$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的<img>src值

Copy after login

Example 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta charset="utf-8">
<script src="jquery-1.7.2.min.js"></script>
<script>
 $(document).ready(function(){
 //是否选择进行判断
 $(".btn").click(function(){
  if ($("input:checkbox:checked").length == 0)
  {
  alert('你未选择爱好');
  }
 });
 //进行反选
  $(".btn1").click(function(){
  $("input[type=checkbox]").each(function(){
  if ($(this).attr("checked"))
  {
   $(this).attr("checked",false);
  }else{
   $(this).attr("checked",true);
  }
  });
  });
  });
 </script>
 </head>
<body>
爱好：
<input type="checkbox" name="fav[]" value="read">阅读
<input type="checkbox" name="fav[]" value="music">音乐
<input type="checkbox" name="fav[]" value="sport">体育<br />
<input type="button" name="btn" class="btn" value="提交">
<input type="button" name="btn1" class="btn1" value="反选">
</body>
</html>

Copy after login

Example 2:

<script src="jquery-1.3.2.min.js"></script>
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_1″ />1<br /> <input type="checkbox" name="checkbox_name[]" id="checkbox_name_2″ />2<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_3″ />3<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_4″ />4<br />
<input type="checkbox" name="checkedAll" id="checkedAll"/>全选/取消全选
<script type="text/javascript">
<!--
$(function() {
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true) { // 全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", true);
});
} else { // 取消全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", false);
});
}
});
});
// -->
</script>

Copy after login

I hope this article will be helpful to everyone in JavaScript programming.