選擇和取消選擇所有複選框

Question

我不能夠實現這些東西，在這個頁面中我想做落實3兩件事：

1>默認情況下，蘋果和貓會在這個頁面進行檢查。 2>對於所有功能都將被檢查和禁用。 3>對於STOPALL，所有的功能也將被默認（AC）值將被禁用，禁用*

<script type="text/javascript"> //This jquery is using for on selecting the checkbox,it will assign the text field of policyName and features 
    $(document).ready(function() { 
     $('.check').click(function(){ 
      $("#policyName").val('Start'); 
      $("#features").val(''); 
        $(".check").each(function(){ 
       if($(this).prop('checked')){ 
        $("#policyName").val($("#policyName").val() + $(this).val()); 
        $("#features").val($("#features").val() + $(this).data('name')); 
        }   
      }); 
     }); 
    }); 
    </script> 

這是我的jsp頁面：

<div align="center" id="checkboxes"> 
<input type="checkbox" name="startall" data-name="Startall" class="check" id="check" value="all"> All &nbsp;&nbsp;&nbsp; 
<input type="checkbox" name="stopall" data-name="Stopall" class="check" id="check" value="stopall"> STOPall &nbsp;&nbsp; 
<input type="checkbox" name="apple" data-name="Apple" class="check" id="check" value="a"> Apple &nbsp;&nbsp;&nbsp; 
<input type="checkbox" name="ball" data-name="Ball" disabled="disabled" checked="checked" id="check" value="b"> Ball 
    &nbsp;&nbsp;&nbsp; 
<input type="checkbox" name="cat" data-name="Cat" class="check" id="check" value="a"> Cat &nbsp;&nbsp;&nbsp; 
<input type="checkbox" name="dog" data-name="Dog" checked="checked" disabled="disabled" id="check" value="d"> Dog 
    &nbsp;&nbsp;&nbsp; 
<input type="checkbox" name="elephant" data-name="Elephant" disabled="disabled" checked="checked" id="check" value="e"> 
    Elephant &nbsp;&nbsp;&nbsp; 
</div> 

的任何援助....將被apprciated。

Answer 1

在你的HTML試試這個

ID應該獨特 ..嘗試使用不同的ID或類，而不是..我寫使用名稱屬性，它是一個緩慢的選擇的代碼..

$(document).ready(function() { 
$('[name="apple"], [name="cat"]').prop('checked', true); 

$('[name="startall"]').on('click', function() { 
    var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]'); 
    if (this.checked) { 
     $checkboxes.prop({ 
      checked: true, 
      disabled: false 
     }); 
     $('#textbox').val($(this).attr('data-name')); 
    } 
    else{ 
     $checkboxes.prop({ 
      checked: false 
     }); 
     $('#textbox').val(''); 
    } 
}); 

$('[name="stopall"]').on('click', function() { 
    var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]'); 
    if (this.checked) { 
     $checkboxes.prop({ 
      checked: false, 
      disabled: true 
     }); 
     $('#textbox').val($(this).attr('data-name')); 
    } 
    else{ 
     $checkboxes.prop({ 
      disabled: false 
     }); 
     $('#textbox').val(''); 
    } 
}); 

}）;

UPDATED DEMO