Mengaktifkan / menonaktifkan Kotak centang


397

Saya memiliki yang berikut ini:

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

Saya ingin id="select-all-teammembers"ketika diklik untuk beralih antara dicentang dan tidak dicentang. Ide ide? itu bukan lusinan baris kode?

Jawaban:


723

Kamu bisa menulis:

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

Sebelum jQuery 1.6, ketika kami hanya memiliki attr () dan bukan prop () , kami biasa menulis:

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

Tetapi prop()memiliki semantik yang lebih baik daripada attr()ketika diterapkan pada atribut HTML "boolean", jadi biasanya lebih disukai dalam situasi ini.


4
Ini bisa menjadi sangat karena mendasarkan status dari yang pertama (jadi jika pengguna memeriksa yang pertama, kemudian menggunakan toggle, mereka akan keluar dari sinkronisasi). Tweak sedikit sehingga mendasarkan status dari sakelar, bukan kotak centang pertama dalam daftar: $ ("input [nama = penerima \ [\]]"). Prop ("dicentang", $ (ini) .prop (" dicentang "));
CookiesForDevo

6
Menggunakan 'prop' membuat ini bekerja untuk Zepto juga. Jika tidak maka akan mencentang kotak, tetapi tidak akan menghapus centang.
SimplGy

1
"prop" alih-alih "attr" melakukan trik: dengan "attr", matikan untuk sementara waktu dan kemudian berhenti, dengan "prop" sebagai gantinya toggle seperti yang diharapkan. +1 untuk pembaruan.
TechNyquist

11
$('input[type=checkbox]').trigger('click');disebutkan oleh @ 2astalavista di bawah ini lebih ringkas dan juga memicu acara "perubahan".
sini

1
bisakah Anda mengedit jawaban Anda untuk mendukung jawaban @ CookiesForDevo
acquayefrank

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

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

Bekerja di chrome 29 tetapi tidak di FF 17.0.7, dapatkah seseorang mengonfirmasi hal itu?
Griddo

Saya telah menempuh rute untuk mengubah properti begitu lama. Bagi saya ini adalah pendekatan yang bagus dan lebih fleksibel untuk memeriksa dan menghapus centang pada elemen kotak centang.
Isioma Nnodum

Peristiwa yang tidak diinginkan dipicu.
Jehong Ahn

Untuk kotak centang, umumnya lebih disarankan untuk memecat acara 'perubahan', karena dapat diubah dengan mengklik label.
Peter Lenjo

61

Saya tahu ini sudah lama tetapi pertanyaannya agak ambigu dalam berganti itu berarti setiap kotak centang harus berganti statusnya, apa pun itu. Jika Anda telah memeriksa 3 dan 2 tidak dicentang, maka beralih akan membuat 3 pertama tidak dicentang dan 2 terakhir dicentang.

Untuk itu, tidak ada solusi di sini yang berfungsi karena mereka membuat semua kotak centang memiliki status yang sama, daripada beralih setiap negara kotak centang. Melakukan $(':checkbox').prop('checked')pada banyak kotak centang mengembalikan logika AND antara semua .checkedproperti biner, yaitu jika salah satunya tidak dicentang, nilai yang dikembalikan adalah false.

Anda harus menggunakan .each() jika Anda ingin benar-benar beralih setiap negara kotak centang daripada membuat semuanya sama, misalnya

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

Perhatikan bahwa Anda tidak perlu $(this)di dalam penangan karena .checkedproperti ada di semua browser.


5
Ya, ini jawaban yang benar untuk mengubah keadaan semua kotak centang!
Sydwell

1
Pesanan besarnya lebih cepat daripada memicu klik dengan jQuery ketika Anda memiliki banyak kotak centang.
Jeremy Cook

16

Inilah cara lain yang Anda inginkan.

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

9
Itu tidak berganti-ganti.
AgentFire

2
@kst - Ini adalah metode yang lebih baik $ ('input [nama = penerima \ [\]]'). beralih (this.checked); Lupakan kelas.
Davis

11

Saya pikir lebih mudah hanya memicu klik:

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

9

Cara terbaik yang bisa saya pikirkan.

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

atau

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

atau

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

8

Sejak jQuery 1.6, Anda dapat menggunakan .prop(function)untuk mengaktifkan status yang dicentang dari setiap elemen yang ditemukan:

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

Jawaban yang sangat bagus. Apakah Anda kebetulan tahu lebih banyak tentang melewati garis bawah sebagai param pertama? Di mana saya bisa belajar lebih banyak tentang itu?
user1477388

1
Sunting: Rupanya, itu pada dasarnya adalah sarana untuk lulus null stackoverflow.com/questions/11406823/...
user1477388

8

Gunakan plugin ini:

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

   }

Kemudian

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

2

Dengan asumsi bahwa itu adalah gambar yang harus beralih kotak centang, ini berfungsi untuk saya

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

4
Karena ini adalah jawaban pertama Anda, sadari bahwa paling sering mengikuti pola poster yang digunakan dalam pertanyaan - seperti memasukkan kode jQuery dalam penangan siap dokumen dan bukan in-line dalam markup. JIKA Anda memiliki alasan untuk TIDAK melakukan itu, tambahkan penjelasan mengapa.
Mark Schultheiss

2

Kotak centang centang semua harus diperbarui sendiri dalam kondisi tertentu. Cobalah klik '# select-all-teammembers' lalu hapus centang beberapa item dan klik select-all lagi. Anda dapat melihat ketidakkonsistenan. Untuk mencegahnya gunakan trik berikut:

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

BTW semua kotak centang DOM-objek harus di-cache seperti dijelaskan di atas.


2

Berikut adalah cara jQuery untuk mengaktifkan kotak centang tanpa harus memilih kotak centang dengan html5 & label:

 <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


1

jika Anda ingin mengaktifkan setiap kotak satu per satu (atau hanya satu kotak juga berfungsi):

Saya sarankan menggunakan .each (), karena mudah dimodifikasi jika Anda menginginkan hal yang berbeda terjadi, dan masih relatif singkat dan mudah dibaca.

misalnya:

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

di samping catatan ... tidak yakin mengapa semua orang menggunakan .attr () atau .prop () untuk (un) memeriksa hal-hal.

Sejauh yang saya tahu, element.checked selalu bekerja sama di semua browser?


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

;)


1

Anda dapat menulis seperti ini juga

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

Hanya perlu memanggil event klik kotak centang ketika pengguna mengklik tombol dengan id '# checkbox-toggle'.


1

Pendekatan yang lebih baik dan 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);
});

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

Mencoba:

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

1

Yang ini bekerja sangat baik untuk saya.

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

1
Anda sadar bahwa Anda memberi properti "dicentang" dengan nilai yang persis sama dengan yang dimilikinya, bukan? bukankah itu agak memalukan? Anda jelas bermaksud untuk meletakkan !tanda di depannya ..
vsync

1

Contoh paling mendasar adalah:

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


1

cukup Anda bisa menggunakan ini

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

0

dalam dugaan saya, orang yang paling tepat yang menyarankan varian normal adalah GigolNet Gigolashvili, tetapi saya ingin menyarankan varian yang lebih indah. Periksa

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

0

Pengaturan 'dicentang' atau nol, bukan benar atau salah masing-masing akan melakukan pekerjaan.

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

0

Kode ini akan mengaktifkan kotak centang setelah mengklik animator sakelar apa pun yang digunakan dalam templat web. Ganti ".onoffswitch-label" sebagaimana tersedia dalam kode Anda. "checkboxID" adalah kotak centang yang diaktifkan di sini.

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

-3

Ya ada cara yang lebih mudah

Pertama, berikan kotak centang Anda contoh kelas 'id_chk'

Kemudian di dalam kotak centang yang akan mengontrol kotak centang 'id_chk' menyatakan:

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

Itu semua, semoga ini membantu

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.