checkbox的全選、反選、多選等操作（js）

標籤：checked   js   多選   反選   單選   

以下控制項的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

checkbox的全選、反選、多選等操作（js）