สลับเปิด / ปิดช่องทำเครื่องหมาย

ฉันมีดังต่อไปนี้:

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

ฉันต้องการid="select-all-teammembers"เมื่อคลิกเพื่อสลับระหว่างการตรวจสอบและไม่เลือก ไอเดีย? นั่นไม่ใช่โค้ดหลายสิบบรรทัด?

คุณสามารถเขียน:

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

ก่อน jQuery 1.6 เมื่อเรามีเพียงattr ()และไม่ใช่prop ()เราเคยเขียน:

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

แต่prop()มีซีแมนทิกส์ดีกว่าattr()เมื่อใช้กับแอตทริบิวต์ HTML "บูลีน" ดังนั้นจึงมักเป็นที่ต้องการในสถานการณ์นี้

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

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

ฉันรู้ว่ามันเก่า แต่คำถามก็ค่อนข้างคลุมเครือในการสลับซึ่งอาจหมายถึงช่องทำเครื่องหมายแต่ละอันควรสลับสถานะของมันไม่ว่าจะเป็นอะไรก็ตาม หากคุณตรวจสอบแล้ว 3 รายการและไม่ได้ตรวจสอบ 2 รายการการสลับจะทำให้ไม่ทำเครื่องหมาย 3 รายการแรกและตรวจสอบ 2 รายการสุดท้าย

สำหรับการที่ไม่มีวิธีการแก้ปัญหาที่นี่ทำงานเพราะพวกเขาทำให้ช่องทำเครื่องหมายทั้งหมดมีสถานะเดียวกันมากกว่าที่จะสลับสถานะของแต่ละช่อง ทำ$(':checkbox').prop('checked')กับข้อเสนออื่น ๆ อีกมากมายส่งกลับตรรกะและระหว่างทุกคุณสมบัติไบนารีเช่นถ้าหนึ่งของพวกเขาไม่ได้ถูกเลือกค่าส่งกลับเป็น.checkedfalse

คุณจำเป็นต้องใช้.each()ถ้าคุณต้องการสลับแต่ละช่องทำเครื่องหมายแทนที่จะทำให้มันเท่ากันทั้งหมดเช่น

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

โปรดทราบว่าคุณไม่ต้องการ$(this)ภายในตัวจัดการเนื่องจาก.checkedคุณสมบัตินี้มีอยู่ในเบราว์เซอร์ทั้งหมด

นี่เป็นอีกวิธีหนึ่งที่คุณต้องการ

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

ฉันคิดว่าการเรียกคลิกทำได้ง่ายกว่า:

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

วิธีที่ดีที่สุดที่ฉันสามารถนึกได้

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

หรือ

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

หรือ

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

ตั้งแต่ jQuery 1.6 คุณสามารถใช้.prop(function)เพื่อสลับสถานะการตรวจสอบของแต่ละองค์ประกอบที่พบ:

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

ใช้ปลั๊กอินนี้:

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

   }

แล้วก็

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

สมมติว่าเป็นภาพที่ต้องสลับช่องทำเครื่องหมายนี่ใช้งานได้สำหรับฉัน

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

ช่องทำเครื่องหมายทุกช่องควรอัปเดตตัวเองภายใต้เงื่อนไขบางประการ ลองคลิกที่'# select-all-teammembers'จากนั้นยกเลิกการเลือกไม่กี่รายการแล้วคลิกเลือกทั้งหมดอีกครั้ง คุณสามารถเห็นความไม่แน่นอน เพื่อป้องกันไม่ให้ใช้เคล็ดลับต่อไปนี้:

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

BTW ช่องทำเครื่องหมายทั้งหมด DOM- วัตถุควรเก็บไว้ตามที่อธิบายไว้ข้างต้น

นี่คือวิธี jQuery ในการสลับช่องทำเครื่องหมายโดยไม่ต้องเลือกช่องทำเครื่องหมายด้วย html5 & ป้ายกำกับ:

 <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

หากคุณต้องการสลับแต่ละกล่องแยกกัน (หรือเพียงแค่หนึ่งกล่องทำงานได้เช่นกัน):

ฉันแนะนำให้ใช้. each () เนื่องจากมันง่ายที่จะแก้ไขหากคุณต้องการให้สิ่งต่าง ๆ เกิดขึ้นและยังค่อนข้างสั้นและอ่านง่าย

เช่น :

// 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();}  
});

ในบันทึกย่อด้าน ... ไม่แน่ใจว่าทำไมทุกคนใช้ .attr () หรือ. prop () เพื่อ (ยกเลิก) ตรวจสอบสิ่งต่างๆ

เท่าที่ฉันรู้ element.checked ทำงานเหมือนกันในทุกเบราว์เซอร์หรือไม่

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;
    });
});

;)

คุณสามารถเขียนสิ่งนี้ได้เช่นกัน

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

เพียงแค่ต้องเรียกเหตุการณ์การคลิกกล่องกาเมื่อผู้ใช้คลิกที่ปุ่มที่มี ID '# checkbox-toggle'

วิธีการที่ดีกว่าและ 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>

ลอง:

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

อันนี้ใช้ได้ดีสำหรับฉัน

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

ตัวอย่างพื้นฐานที่สุดคือ:

// 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>

เพียงแค่คุณสามารถใช้สิ่งนี้

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

ในการเดาของฉันคนที่เหมาะสมที่สุดที่แนะนำตัวแปรปกติคือ GigolNet Gigolashvili แต่ฉันอยากจะแนะนำตัวแปรที่สวยงามกว่านี้ ตรวจสอบ

$(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
    })
})

การตั้งค่า 'ตรวจสอบ' หรือโมฆะแทนจริงหรือเท็จตามลำดับจะทำงาน

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

รหัสนี้จะสลับช่องทำเครื่องหมายเมื่อคลิกที่สวิตช์สลับภาพเคลื่อนไหวใด ๆ ที่ใช้ในแม่แบบเว็บ แทนที่ ".onoffswitch-label" ตามที่มีอยู่ในรหัสของคุณ "checkboxID" เป็นช่องทำเครื่องหมายที่สลับที่นี่

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

มีวิธีที่ง่ายกว่า

ก่อนอื่นให้ช่องทำเครื่องหมายของคุณเป็นตัวอย่างคลาส 'id_chk'

จากนั้นภายในช่องทำเครื่องหมายที่จะควบคุมสถานะของช่องทำเครื่องหมาย 'id_chk':

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

หวังว่านี่จะช่วยได้