checkbox全選、取消全選以及子checkbox聯動

HTML部分代碼

<input type="checkbox" name="selectAll">
<input type="checkbox" name="rmReq" value="1">
<input type="checkbox" name="rmReq" value="2">
<input type="checkbox" name="rmReq" value="3">
<input type="checkbox" name="rmReq" value="4">

JS部分,需要引入JQuery

 $(function () {
     $('input[name="selectAll"]').on("click",function(){
         if($(this).is(':checked')){
             $('input[name="rmReq"]').each(function(){
                 $(this).prop("checked",true);
             });
         }else{
             $('input[name="rmReq"]').each(function(){
                 $(this).prop("checked",false);
             });
         }
    });

    $('input[name="rmReq"]').on("click",function(){
        if($(this).is(':checked')){                            
            if($("input[name='rmReq']:checked").length==$("input[name='rmReq']").length{
                $('input[name="selectAll"]').prop("checked",true);
            }
        }else{
            $('input[name="selectAll"]').prop("checked",false);
        }
    });
});

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章