一、jquery实现全选
在实际项目中,有时候需要对多个input checkbox进行全选或全不选操作,这时候可以使用jquery来方便地实现。
<script> // 给全选的checkbox添加点击事件 $('#selectAll').on('click', function() { $('input[type="checkbox"]').prop('checked', true); }); </script>
上述代码中,我们给一个名为"selectAll"的checkbox添加了点击事件,当这个checkbox被点击后,所有type为checkbox的input都会被选中。
但是,如果已经有部分checkbox被选中,我们再点击全选,则会取消选中状态,这并不是我们想要的效果。
下面我们对代码进行修改,先判断全选checkbox是否被选中(prop('checked')返回一个布尔值),如果已选中则将所有复选框设为选中状态,否则将所有复选框设为不选中状态。
<script> $('#selectAll').on('click', function() { $('input[type="checkbox"]').prop('checked', $(this).prop('checked')); }); </script>
二、jquery 全选
以上代码可以实现全选功能,但是在实际应用中还有一种情况:每个选项后面都有对应的数量,选中后需要计算总数量,在全选的基础上,还需要计算总数量。
<script> $('#selectAll').on('click', function() { var total = 0; $('input[type="checkbox"]').each(function() { if($(this).prop('checked')) { total += parseInt($(this).next().text()); } $(this).prop('checked', true); }); $('#total').text(total); }); </script>
以上代码中,我们定义了一个变量total,用于累加选中的数量。每个复选框被选中后,我们获取它的下一个元素,即数量,将其转为整数并累加到total中。
最后,我们设置总数量的文本为total。这样就可以实现全选并计算数量的功能。
三、jquery实现复选框全选选取
在实际项目中,往往还需要对多个复选框进行全选选取操作,这时候我们需要使用jquery的each函数遍历每个checkbox,用一个计数器记录选中的个数,如果遍历完所有checkbox后计数器等于复选框的个数,则表示所有复选框都被选中,此时我们将全选checkbox设为选中状态即可。
<script> $('input[type="checkbox"]').on('click', function() { var count = 0; $('input[type="checkbox"]').each(function() { if($(this).prop('checked')) { count++; } }); if(count == $('input[type="checkbox"]').length) { $('#selectAll').prop('checked', true); } else { $('#selectAll').prop('checked', false); } }); </script>
以上代码中,我们给每个复选框添加了点击事件。在事件处理函数中,我们先遍历每个复选框,如果被选中则计数器加1。如果计数器等于复选框的总个数,则表示所有复选框都被选中,此时将全选checkbox设为选中状态,否则设为不选中状态。
至此,我们就实现了复选框的全选选取功能。