Bật / tắt hộp kiểm

Tôi có những điều sau đây:

$(document).ready(function()
{
    $("#select-all-teammembers").click(function() {
        $("input[name=recipients\\[\\]]").attr('checked', true);
    });                 
});

Tôi muốn id="select-all-teammembers"khi được nhấp để chuyển đổi giữa kiểm tra và không được kiểm tra. Ý tưởng? Đó không phải là hàng chục dòng mã?

Bạn có thể viết:

$(document).ready(function() {
    $("#select-all-teammembers").click(function() {
        var checkBoxes = $("input[name=recipients\\[\\]]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });                 
});

Trước jQuery 1.6, khi chúng ta chỉ có attr () chứ không phải prop () , chúng ta thường viết:

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

Nhưng prop()có ngữ nghĩa tốt hơn so với attr()khi áp dụng cho các thuộc tính HTML "boolean", vì vậy nó thường được ưa thích hơn trong tình huống này.

//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 

Tôi biết điều này đã cũ nhưng câu hỏi hơi mơ hồ trong việc chuyển đổi đó có thể có nghĩa là mỗi hộp kiểm sẽ chuyển trạng thái của nó, bất kể đó là gì. Nếu bạn có 3 kiểm tra và 2 không được kiểm tra, thì việc bật tắt sẽ khiến 3 lần đầu tiên được chọn và 2 lần kiểm tra cuối cùng.

Vì thế, không có giải pháp nào ở đây hoạt động khi chúng làm cho tất cả các hộp kiểm có cùng trạng thái, thay vì chuyển đổi từng trạng thái của hộp kiểm. Thực hiện $(':checkbox').prop('checked')trên nhiều hộp kiểm trả về logic VÀ giữa tất cả .checkedcác thuộc tính nhị phân, nghĩa là nếu một trong số chúng không được chọn, giá trị được trả về là false.

Bạn cần sử dụng .each()nếu bạn thực sự muốn chuyển đổi từng trạng thái hộp kiểm thay vì làm cho tất cả chúng bằng nhau, ví dụ:

   $(':checkbox').each(function () { this.checked = !this.checked; });

Lưu ý rằng bạn không cần $(this)bên trong trình xử lý vì thuộc .checkedtính tồn tại trong tất cả các trình duyệt.

Đây là một cách khác mà bạn muốn.

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});

Tôi nghĩ đơn giản hơn khi chỉ kích hoạt một nhấp chuột:

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\\[\\]]").trigger('click');
});                 

Cách tốt nhất tôi có thể nghĩ ra.

$('#selectAll').change(function () {
    $('.reportCheckbox').prop('checked', this.checked);
});

hoặc là

$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
    $checkBoxes.prop("checked", this.checked);
});   

hoặc là

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}

Vì jQuery 1.6, bạn có thể sử dụng .prop(function)để chuyển trạng thái đã kiểm tra của từng thành phần được tìm thấy:

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
    return !checked;
});

Sử dụng plugin này:

$.fn.toggleCheck  =function() {
       if(this.tagName === 'INPUT') {
           $(this).prop('checked', !($(this).is(':checked')));
       }

   }

Sau đó

$('#myCheckBox').toggleCheck();

Giả sử rằng đó là một hình ảnh phải chuyển hộp kiểm, điều này làm việc với tôi

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">

Kiểm tra tất cả các hộp kiểm nên được cập nhật chính nó trong các điều kiện nhất định. Hãy thử nhấp vào '# select-all-teammembers', sau đó bỏ chọn vài mục và nhấp lại chọn tất cả. Bạn có thể thấy sự không nhất quán. Để ngăn chặn nó sử dụng thủ thuật sau:

  var checkBoxes = $('input[name=recipients\\[\\]]');
  $('#select-all-teammembers').click(function() {
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $(this).prop("checked", checkBoxes.is(':checked'));
  }); 

BTW tất cả các hộp kiểm Đối tượng DOM nên được lưu trữ như được mô tả ở trên.

Dưới đây là cách jQuery để chuyển đổi các hộp kiểm mà không phải chọn hộp kiểm có html5 & nhãn:

 <div class="checkbox-list margin-auto">
    <label class="">Compare to Last Year</label><br>
    <label class="normal" for="01">
       <input id="01" type="checkbox" name="VIEW" value="01"> Retail units
    </label>
    <label class="normal" for="02">
          <input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
    </label>
    <label class="normal" for="03">
          <input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
    </label>
    <label class="normal" for="04">
          <input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
    </label>
</div>

  $("input[name='VIEW']:checkbox").change(function() {
    if($(this).is(':checked')) {  
         $("input[name='VIEW']:checkbox").prop("checked", false);
     $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
         $(this).prop("checked", true);
         $(this).parent('.normal').addClass('checked');
    }
    else{
         $("input[name='VIEW']").prop("checked", false);
         $("input[name='VIEW']").parent('.normal').removeClass('checked');
    }    
});

http://www.bootply.com/A4h6kAPshx

nếu bạn muốn chuyển từng hộp riêng lẻ (hoặc chỉ một hộp cũng hoạt động tốt):

Tôi khuyên bạn nên sử dụng .each (), vì nó dễ sửa đổi nếu bạn muốn những điều khác nhau xảy ra, và vẫn tương đối ngắn và dễ đọc.

ví dụ :

// toggle all checkboxes, not all at once but toggle each one for its own checked state:
$('input[type="checkbox"]').each(function(){ this.checked = ! this.checked });

// check al even boxes, uncheck all odd boxes:
$('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); });

// set all to checked = x and only trigger change if it actually changed:
x = true;
$('input[type="checkbox"]').each(function(){
    if(this.checked != x){ this.checked = x; $(this).change();}  
});

trên một ghi chú bên cạnh ... không chắc chắn tại sao mọi người sử dụng .attr () hoặc .prop () để (un) kiểm tra mọi thứ.

Theo như tôi biết, Element.checked luôn hoạt động giống nhau trong tất cả các trình duyệt?

jQuery("#checker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = true;
    });
});
jQuery("#dechecker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = false;
    });
});
jQuery("#checktoggler").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = !this.checked;
    });
});

;)

Bạn cũng có thể viết như thế này

$(function() {
    $("#checkbox-toggle").click(function() {
        $('input[type=checkbox][name=checkbox_id\\[\\]]').click();
    });
});

Chỉ cần gọi sự kiện nhấp vào hộp kiểm khi người dùng nhấp vào nút có id '# hộp kiểm tra chuyển đổi'.

Một cách tiếp cận tốt hơn và UX

$('.checkall').on('click', function() {
   var $checks  = $('checks');
   var $ckall = $(this);

    $.each($checks, function(){
        $(this).prop("checked", $ckall.prop('checked'));
    });
});

$('checks').on('click', function(e){
   $('.checkall').prop('checked', false);
});

<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
    <tr>
        <th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
        <th class="col-xs-2">#ID</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" name="order333"/></td>
        <td>{{ order.id }}</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="order334"/></td>
        <td>{{ order.id }}</td>
    </tr>
</tbody>                  
</table>

Thử:

$(".table-datatable .select_all").on('click', function () {
    $("input[name^='order']").prop('checked', function (i, val) {
        return !val;
    });
});

Điều này làm việc rất tốt cho tôi.

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });

Ví dụ cơ bản nhất sẽ là:

// get DOM elements
var checkbox = document.querySelector('input'),
    button = document.querySelector('button');

// bind "cilck" event on the button
button.addEventListener('click', toggleCheckbox);

// when clicking the button, toggle the checkbox
function toggleCheckbox(){
  checkbox.checked = !checkbox.checked;
};

<input type="checkbox">
<button>Toggle checkbox</button>

đơn giản là bạn có thể sử dụng cái này

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});

Theo suy đoán của tôi, người đàn ông đúng đắn nhất đã đề xuất biến thể bình thường là GigolNet Gigolashvili, nhưng tôi muốn đề xuất biến thể thậm chí còn đẹp hơn. Kiểm tra nó

$(document).on('click', '.fieldWrapper > label', function(event) {
    event.preventDefault()
    var n = $( event.target ).parent().find('input:checked').length
    var m = $( event.target ).parent().find('input').length
    x = n==m? false:true
    $( event.target ).parent().find('input').each(function (ind, el) {
        // $(el).attr('checked', 'checked');
        this.checked = x
    })
})

Đặt 'kiểm tra' hoặc null thay vì đúng hoặc sai tương ứng sẽ thực hiện công việc.

// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');

Mã này sẽ chuyển đổi hộp kiểm khi nhấp vào bất kỳ trình chuyển đổi hoạt hình chuyển đổi nào được sử dụng trong các mẫu web. Thay thế ".onoffswitch-nhãn" như có sẵn trong mã của bạn. "Hộp kiểm" là hộp kiểm được bật ở đây.

$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked')) 
 {
   $('#checkboxID').prop('checked', false);
 }
else 
 {
   $('#checkboxID').prop('checked', true);
 }
});

Vâng, có một cách dễ dàng hơn

Đầu tiên Cung cấp cho hộp kiểm của bạn một ví dụ lớp 'id_chk'

Sau đó, bên trong hộp kiểm sẽ kiểm soát trạng thái hộp kiểm 'id_chk':

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

Đó là tất cả, hy vọng điều này sẽ giúp