Hộp kiểm jQuery: chọn tất cả/không ngoại trừ một số

Question

Tôi có một hộp kiểm chọn tất cả sự cố. Tôi có nhiều hộp kiểm có thể được kích hoạt bởi một cái chính.

Nếu tài khoản chính đang kiểm tra thì bạn có thể chọn bất kỳ hộp kiểm nào (thao tác này hoạt động). Bây giờ vấn đề của tôi là khi tôi kiểm tra "không" tất cả chúng đều biến mất ngay cả chủ

Những gì tôi cần không phải là không chọn chủ. Tôi có thể có bao nhiêu như hộp kiểm như tôi muốn.

Có giải pháp để thực hiện việc này mà không cần đặt ID trên mỗi hộp hoặc tự động bỏ chọn tất cả hộp kiểm chứ không phải hộp kiểm chính?

đây là mã của tôi:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 
    $('#checkAll').click(function() { 
    if(!$('#master').is(':checked')) { return; 
    } $('input[type="checkbox"]').attr('checked', true); 
    }); 

    $('#checkNone').click(function() { 
    $('input[type="checkbox"]').attr('checked', false); }); 

    $('#master').click(function() { if($('#master').is(':checked')) { 
     return; } $('input[type="checkbox"]').attr('checked', false); 
    }); 
    $('input[type="checkbox"]').click(function() { 
    if(!$('#master').is(':checked')) { $(this).attr('checked', false); 
    } 
    }); 
    }); 

    </script> 
    </head> 

    <input type="checkbox" value="master" id="master">master 
    <span id="checkAll">All</span> 
    <span id="checkNone">None</span> 

    <input type="checkbox" value="1" id="c1">1 
    <input type="checkbox" value="2" id="c2">2 
    <input type="checkbox" value="3" id="c3">3 
    <input type="checkbox" value="4" id="c4">4 
    <input type="checkbox" value="5" id="c5">5 

Answer 1

Dựa trên mã của bạn, tôi sẽ thêm một wrapper xung quanh hộp kiểm bạn muốn chọn tất cả/không và sau đó cung cấp cho các id wrapper và đầu vào để chọn tất cả hoặc không ai.

$('#list input[type="checkbox"]').attr('checked', false);

hoặc cho jQuery 1.6+

$('#list input[type="checkbox"]').prop('checked', false);

Bằng cách này, bạn có thể kiểm soát tất cả các hộp kiểm của bạn mà không ảnh hưởng đến "bậc thầy" một.

Dưới đây là các mã:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 
$('#checkAll').click(function() { 
    if(!$('#master').is(':checked')) { 
     return; 
    } 
    $('#list input[type="checkbox"]').attr('checked', true); 
}); 

$('#checkNone').click(function() { 
    $('#list input[type="checkbox"]').attr('checked', false); 
}); 

$('#master').click(function() { 
    if($('#master').is(':checked')) { 
     return; 
    } 
    $('#list input[type="checkbox"]').attr('checked', false); 
}); 
$('#list input[type="checkbox"]').click(function() { 
    if(!$('#master').is(':checked')) { 
     $(this).attr('checked', false); 
    } 
}); 
}); 

</script> 
</head> 

<input type="checkbox" value="master" id="master">master 
<span id="checkAll">All</span> 
<span id="checkNone">None</span> 

<div id="list"> 
<input type="checkbox" value="1">1 
<input type="checkbox" value="2">2 
<input type="checkbox" value="3">3 
<input type="checkbox" value="4">4 
<input type="checkbox" value="5">5 
</div> 

Answer 2

Bạn chỉ cần một thay đổi rất nhỏ để loại trừ chủ của bạn.

Bạn có thể làm điều đó với .not ("# bậc thầy") như thế này:

$('#checkNone').click(function() { 
    $('input[type="checkbox"]').not("#master").attr('checked', false); });