我想請教一下複選框/ uncheckbox所有

Question

我想取消勾選 「所有」 當我取消checkbok

$('#All').click(function() { 
     var status = $(this).is(":checked"); 
     if (status) { 
      $.each($('input[name="checkbox"]'), function() { 
       this.checked = true; 
      }) 
      $('input[name="checkbox"]').attr("checked", "checked"); 

     } else { 
      $('input[name="checkbox"]').removeAttr("checked"); 
      $.each($('input[name="checkbox"]:checked'), function() { 
       this.checked = false; 
      }) 
     } 

    }) 

Answer 1

我發現$('input[name="checkbox"]').attr("checked", "checked");是無法改變的，而不是所有的複選框checked.Use道具（）.attr()

$('#All').click(function() { 
     var status = $(this).is(":checked");   
     if (status) { 
      $('input:checkbox').prop("checked", "checked"); 
     } else { 
      $('input:checkbox').removeAttr("checked"); 
     } 

    }); 

Answer 2

嘗試使用此

$(".all").click(function() 
 
{ 
 
var el=this; 
 
    $(".child").each(function(){  
 
    $(this).prop("checked",$(el).prop("checked")) ; 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="all"/>All 
 
<input type="checkbox" class="child"/>one 
 
<input type="checkbox" class="child"/>two 
 
<input type="checkbox" class="child"/>three 
 
<input type="checkbox" class="child"/>four

Answer 3

在普通的JavaScript：

document.getElementById('All').addEventListener('click', function(event) { 
    var checkboxes = document.querySelectorAll('input[name="checkbox"]'); 
    Array.from(checkboxes).forEach(checkbox => { 
     checkbox.checked = this.checked; 
    }); 
}); 

Answer 4

取得預期resule，請使用以下選項

Check All: 
('input[type="checkbox"]').prop("checked", "checked"); 

Uncheck All: 
$('input[type="checkbox"]').removeAttr("checked"); 

$（ '＃全部'）點擊（函數（）{ VAR狀態= $（本）。是（ 「：檢查」）; （狀態）{（'input [type =「checkbox」]'）。prop（「checked」，「checked」）;

} else { 
    $('input[type="checkbox"]').removeAttr("checked"); 
    } 
}); 

http://codepen.io/nagasai/pen/ezBvyG

Answer 5

Try with this : 
HTML code : 

<input type="button" class="check" value="check all" /> 
<input type="checkbox" class="cb-element" /> Checkbox 1 
<input type="checkbox" class="cb-element" /> Checkbox 2 
<input type="checkbox" class="cb-element" /> Checkbox 3 

jquery code : 
$(document).ready(function(){ 
    $('.check:button').toggle(function(){ 
     $('input:checkbox').attr('checked','checked'); 
     $(this).val('uncheck all') 
    },function(){ 
     $('input:checkbox').removeAttr('checked'); 
     $(this).val('check all');   
    }) 
}) 
Hope you get your point.