js全选checkbox框

JS全选与反选Checkbox

最新推荐文章于 2024-03-08 15:30:16 发布

MonroeYu

最新推荐文章于 2024-03-08 15:30:16 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m0_37238192/article/details/86150072

本文介绍使用JavaScript实现全选与反选功能的方法。通过两种不同方式操作Checkbox，一种适用于单组Checkbox，另一种适用于多组Checkbox。第一种方法通过修改特定ID的Checkbox状态来控制同一名称的所有Checkbox的状态。第二种方法利用jQuery简化选择过程。

js全选checkbox框

html：
　　<input  type="checkbox" id="checkbox1" value="1" onclick="check1()"/>
　　<input type="checkbox" name="checkbox1" value="${article.id}"/>
　　<input type="checkbox" name="checkbox1" value="${article.id}"/>

js：
function check1(){
            var store1=document.getElementById('checkbox1');
            store1.value==1?store1.value=2:store1.value=1;
            var store1_checkbox=document.getElementsByName('checkbox1');
            for(var i=0;i<store1_checkbox.length;i++){
                if(store1.value==1){
                    store1_checkbox[i].checked=true;
                }
                else{
                    store1_checkbox[i].checked=false;
                }
            }
 }
   第二种方法

/*全选反选*/

</div>

$("#carchecked").change(function() {
$('input[name="carchecked"]').prop("checked",this.checked);
});
$("#reportchecked").change(function() {
$('input[name="reportchecked"]').prop("checked",this.checked);
});