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?

AnApprentice
sumber

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.

Frédéric Hamidi
sumber
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(); 

sumber
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.

Normadize
sumber
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'); 
        }
    );
});
kst
sumber
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');
});                 
Matt terbakar
sumber
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);
}
Dblock247
sumber
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;
});
Mendongkrak
sumber
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();
Abdennour TOUMI
sumber
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">
pengguna1428592
sumber
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.

Anatoly
sumber
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

yardpenalty.com
sumber
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?

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

;)

GigolNet Guigolachvili
sumber
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'.

Milan Malani
sumber
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);
});
Hugo Dias
sumber
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;
    });
});
Karol Gontarski
sumber
1

Yang ini bekerja sangat baik untuk saya.

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });
sovantha
sumber
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>

vsync
sumber
1

cukup Anda bisa menggunakan ini

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});
Fouad Mekkey
sumber
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
    })
})
Arthur Sult
sumber
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');
IPSingh
sumber
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);
 }
});
Pranesh Janarthanan
sumber
-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

malaikat
sumber