Włącz / wyłącz pola wyboru

397

Mam następujące:

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

Chciałbym, aby id="select-all-teammembers"po kliknięciu przełączać między zaznaczonym a niezaznaczonym. Pomysły? to nie są dziesiątki linii kodu?

Uczeń
źródło

Odpowiedzi:

723

Możesz pisać:

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

Przed wersją jQuery 1.6, kiedy mieliśmy tylko attr (), a nie prop () , pisaliśmy:

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

prop()Ma jednak lepszą semantykę niż w attr()przypadku „boolowskich” atrybutów HTML, dlatego zwykle jest to preferowane w tej sytuacji.

Frédéric Hamidi
źródło
4
Może to stać się namacalne, ponieważ opiera status na pierwszym (więc jeśli użytkownik sprawdzi pierwszy, a następnie użyje przełącznika, nie zsynchronizuje się). Nieznacznie poprawiony, aby opierał status wyłącznika, a nie pierwsze pole wyboru na liście: $ („input [name = receptients \ [\]]”). Prop („zaznaczone”, $ (this) .prop (” sprawdzone"));
CookiesForDevo,
6
Użycie „prop” sprawia, że ​​działa to również dla Zepto. W przeciwnym razie zaznaczy to pole, ale go nie odznaczy.
SimplGy,
1
„prop” zamiast „attr” załatwiło sprawę: z „attr” przełącza się na chwilę, a następnie zatrzymuje się, z „prop” zamiast tego przełącza się zgodnie z oczekiwaniami. +1 za aktualizację.
TechNyquist,
11
$('input[type=checkbox]').trigger('click');wspomniane przez @ 2astalavista poniżej jest bardziej zwięzłe i powoduje również zdarzenie „zmiany”.
tutaj
1
czy możesz edytować swoją odpowiedź, aby wesprzeć odpowiedź @
CookiesForDevo
213
//this toggles the checkbox, and fires its event if it has    

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

źródło
Działa w chrome 29, ale nie w FF 17.0.7, czy ktoś może to potwierdzić?
Griddo
Tak długo szedłem drogą zmiany posiadłości. Dla mnie jest to świetne i bardziej elastyczne podejście do sprawdzania i odznaczania elementów pól wyboru.
Isioma Nnodum
Niepożądane zdarzenie jest wyzwalane.
Jehong Ahn
W przypadku pól wyboru na ogół bardziej wskazane jest uruchomienie zdarzenia „zmień”, ponieważ można je zmienić, klikając etykietę.
Peter Lenjo
61

Wiem, że to stare, ale pytanie było nieco dwuznaczne, ponieważ przełączanie może oznaczać, że każde pole wyboru powinno przełączać swój stan, cokolwiek to jest. Jeśli masz 3 zaznaczone, a 2 niezaznaczone, przełączenie spowoduje, że pierwsze 3 pozostaną niezaznaczone, a ostatnie 2 zaznaczone.

W tym celu żadne z rozwiązań tutaj nie działa, ponieważ powodują, że wszystkie pola wyboru mają ten sam stan, zamiast przełączać stan każdego pola wyboru. Wykonanie $(':checkbox').prop('checked')wielu pól wyboru zwraca logiczne AND między wszystkimi .checkedwłaściwościami binarnymi, tzn. Jeśli jedna z nich nie jest zaznaczona, zwracana jest wartośćfalse .

Musisz użyć, .each()jeśli chcesz przełączyć każdy stan pola wyboru zamiast zrównać je wszystkie, np

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

Pamiętaj, że nie musisz korzystać z $(this)modułu obsługi, ponieważ .checkedwłaściwość istnieje we wszystkich przeglądarkach.

Normadize
źródło
5
Tak, to poprawna odpowiedź na przełączanie stanu wszystkich pól wyboru!
Sydwell
1
Rząd wielkości szybciej niż uruchamianie kliknięcia za pomocą jQuery, gdy masz wiele pól wyboru.
Jeremy Cook
16

Oto inny sposób, który chcesz.

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});
kst
źródło
9
To nie jest przełączanie.
AgentFire,
2
@kst - To jest lepsza metoda $ ('input [name = receients \ [\]]'). toggle (this.checked); Zapomnij o zajęciach.
Davis
11

Myślę, że łatwiej jest po prostu uruchomić kliknięcie:

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\\[\\]]").trigger('click');
});                 
matowe oparzenia
źródło
9

Najlepszy sposób, jaki mogę wymyślić.

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

lub

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

lub

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}
Dblock247
źródło
8

Od jQuery 1.6 możesz użyć .prop(function)do przełączania sprawdzonego stanu każdego znalezionego elementu:

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
    return !checked;
});
Jacek
źródło
Doskonała odpowiedź. Czy zdarza ci się wiedzieć więcej o przekazywaniu podkreślenia jako pierwszego parametru? Gdzie mogę dowiedzieć się więcej na ten temat?
user1477388,
1
Edycja: Najwyraźniej jest to zasadniczo sposób na przekazanie wartości zerowej stackoverflow.com/questions/11406823/…
user1477388
8

Użyj tej wtyczki:

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

   }

Następnie

$('#myCheckBox').toggleCheck();
Abdennour TOUMI
źródło
2

Zakładając, że jest to obraz, który musi przełączać pole wyboru, działa to dla mnie

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">
użytkownik1428592
źródło
4
Ponieważ jest to Twoja pierwsza odpowiedź, zdaj sobie sprawę, że najczęściej najlepiej jest podążać za wzorem użytym w pytaniu - na przykład umieszczając kod jQuery w module obsługi dokumentów, a nie bezpośrednio w znacznikach. JEŚLI masz powód, aby tego NIE robić, dodaj wyjaśnienie, dlaczego.
Mark Schultheiss
2

Sprawdź wszystko pole powinno zostać zaktualizowane się pod pewnymi warunkami. Spróbuj kliknąć „# select-all-teammembers”, a następnie odznacz kilka elementów i kliknij ponownie select-all. Możesz zobaczyć niespójność. Aby temu zapobiec, użyj następującej sztuczki:

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

BTW wszystkie pola wyboru Obiekt DOM powinien być buforowany zgodnie z powyższym opisem.

Anatolij
źródło
2

Oto jQuery sposób przełączania pól wyboru bez konieczności zaznaczania pola wyboru za pomocą html5 i etykiet:

 <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
źródło
1

jeśli chcesz przełączać poszczególne pola osobno (lub tylko jedno pole działa równie dobrze):

Polecam użycie .each (), ponieważ jest łatwa do modyfikacji, jeśli chcesz, aby wydarzyły się różne rzeczy, a jednocześnie stosunkowo krótka i łatwa do odczytania.

np .:

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

na marginesie ... nie jestem pewien, dlaczego wszyscy używają .attr () lub .prop () do (od) sprawdzania rzeczy.

o ile wiem, element.checked zawsze działał tak samo we wszystkich przeglądarkach?

MoonLite
źródło
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
źródło
1

Możesz także tak pisać

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

Wystarczy wywołać zdarzenie kliknięcia pola wyboru, gdy użytkownik kliknie przycisk o identyfikatorze „# checkbox-toggle”.

Milan Malani
źródło
1

Lepsze podejście i 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
źródło
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>

Próbować:

$(".table-datatable .select_all").on('click', function () {
    $("input[name^='order']").prop('checked', function (i, val) {
        return !val;
    });
});
Karol Gontarski
źródło
1

Ten działa dla mnie bardzo dobrze.

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });
sovantha
źródło
1
zdajesz sobie sprawę, że nadajesz właściwości „zaznaczonej” dokładnie taką samą wartość, jaką już ma, prawda? czy to nie jest trochę zawstydzające? najwyraźniej chciałeś postawić !przed tym znak ...
vsync,
1

Najbardziej podstawowym przykładem byłoby:

// 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
źródło
1

po prostu możesz tego użyć

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});
Fouad Mekkey
źródło
0

Myślę, że najodpowiedniejszym człowiekiem, który zaproponował normalny wariant, jest GigolNet Gigolashvili, ale chcę zaproponować jeszcze piękniejszy wariant. Sprawdź to

$(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
źródło
0

Ustawienie „zaznaczone” lub null zamiast odpowiednio prawda lub fałsz wykona pracę.

// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');
IPSingh
źródło
0

Ten kod przełącza pole wyboru po kliknięciu dowolnego animatora przełączania przełącznika używanego w szablonach internetowych. Zamień „.onoffswitch-label” na dostępne w kodzie. „checkboxID” to pole wyboru przełączane tutaj.

$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked')) 
 {
   $('#checkboxID').prop('checked', false);
 }
else 
 {
   $('#checkboxID').prop('checked', true);
 }
});
Pranesh Janarthanan
źródło
-3

Jest łatwiejszy sposób

Najpierw daj swoim polom wyboru przykład klasy „id_chk”

Następnie wewnątrz pola wyboru, które będzie kontrolować stan pól wyboru id_chk:

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

To wszystko, mam nadzieję, że to pomoże

Anioł
źródło