js实现表单checkbox的单选,全选

it2022-05-23  56

全选&单选

//<input type="checkbox" name="" class="quan" value="" />全选 //<input type="checkbox" name="" class="dan" value="" />单选 //<input type="checkbox" name="" class="dan" value="" />单选 //<input type="checkbox" name="" class="dan" value="" />单选 //<input type="checkbox" name="" class="dan" value="" />单选 //<input type="checkbox" name="" class="quan" value="" />全选 <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var $checke_q = $(".quan"); //全选按钮 var $checke_d = $(".dan"); //单选按钮 $checke_q.click(function() { var that = this; $checke_d.each(function() { //所有的单选按钮跟随选中的多选按钮变化 this.checked = that.checked; }) $checke_q.each(function(){ //所有的多选按钮跟随选中的多选按钮变化 this.checked=that.checked; }) }) $checke_d.change(function() { let count = 0; //单选 按钮 个数 $checke_d.each(function() { if(this.checked) { count ++; } }) if(count == $checke_d.length) { //当count等于单选按钮的个数时 说明单选按钮全部选中了,此时多选按钮也该被选中 $checke_q.each(function() { this.checked = true; }) } else { $checke_q.each(function() { this.checked = false; }) } }) </script>

转载于:https://www.cnblogs.com/hw-0409/p/7886476.html

相关资源:checkbox全选、反选、单选(前端)

最新回复(0)