checkbox的全选反选多选等操作（js）

Posted 2020-08-19

以下控件的name属性为DEPT_ID 
(案例中默认选中的checkbox，全选或者反选，对该控件无影响)
//1.全选

function selectAllRight(){

$("input[name=‘DEPT_ID‘").each(function() {  

    $(this).prop("checked", true); 

 }); 

}

//2.反选
function reverseSelectRight(){
    $("input[name=‘DEPT_ID‘").each(function() {  
    //若当前选项没被选中，则设置为选中
    if(false == $(this).is(‘:checked‘)){
        $(this).prop("checked", true);
    }else{
    //若当前选项选中，但是不是为disabled的话，则设置为取消选中
    if(false == $(this).prop("disabled")){
        $(this).prop("checked", false);
    }}}); }

//3.进行选择控制，当且仅当只允许选择一个。
$("input[name=‘DEPT_ID‘]").click(function() {
$("input[name=‘DEPT_ID‘").each(function() {              
//若当前当前不为disable，并且被选中，则取消选中            
if(true ==$(this).is(‘:checked‘)){            
if(true == $(this).prop("disabled")){
    $(this).prop("checked", true);
}else{
    $(this).prop("checked", false);
}}});
//当前设置选中状态
    $(this).prop("checked", true);
});

//4.重置
function abandonSelectRight(){
    //获取所有被选中的部门
        $("input[name=‘DEPT_ID‘").each(function() {  
    //若当前选项没被选中，则设置为选中
    if(true == $(this).is(‘:checked‘)){
    //若当前选项选中，但是不是为disabled的话，则设置为取消选中
    if(false == $(this).prop("disabled")){
        $(this).prop("checked", false);
    }}
    });
}


控件：
<label><input name="DEPT_ID" type="checkbox" value="100100" />控件1 </label>

<label><input name="DEPT_ID" type="checkbox" value="100100" />控件2 </label>

<label><input name="DEPT_ID" type="checkbox" value="100100" />控件3 </label>

本文出自 “雷氏出品” 博客，请务必保留此出处http://leoky.blog.51cto.com/752840/1871889