Sprawdź, czy pole wyboru jest zaznaczone za pomocą jQuery

1187

Jak mogę sprawdzić, czy pole wyboru w tablicy pól wyboru jest zaznaczone przy użyciu identyfikatora tablicy pól wyboru?

Korzystam z następującego kodu, ale zawsze zwraca liczbę zaznaczonych pól wyboru niezależnie od identyfikatora.

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}
Jake
źródło
Tablica wyboru ? Nigdy o tym nie słyszałem. Czy jest to coś specyficznego dla JQuery, czy wtyczka / widżet?
Pekka
2
tablica wyboru oznacza coś takiego: <input type = "checkbox" name = "chk []" id = "chk []" value = "apple"> <input type = "checkbox" name = "chk []" id = "chk []" value = "banana"> <input type = "checkbox" name = "chk []" id = "chk []" value = "orange"> itd.
Jake
2
co jest nie tak z tablicą pól wyboru? jak inaczej zrobilibyście wejście „sprawdź wszystko, co ma zastosowanie”?
nickf
5
Upewnij się, że Twoje idsą wyjątkowe! namemoże (i powinien w tym przypadku) się powtórzyć, ale znajdziesz wiele dziwnych rzeczy, które się wydarzyły, jeśli powielisz to id! = D
Jeff Rupert
Musiałem usunąć znak „@”, aby działał. Możesz także zminimalizować ostatnie 5 wierszy do 1: return (zaznaczone! = 0);
B. Clay Shannon

Odpowiedzi:

688

Identyfikatory muszą być unikalne w twoim dokumencie, co oznacza, że ​​nie powinieneś tego robić:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Zamiast tego upuść identyfikator, a następnie wybierz go według nazwy lub elementu zawierającego:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

A teraz jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
pseudonim
źródło
Dla mnie pracował bez podwójnych cudzysłowów na nazwa wejściowa: input [nazwa = wielokrotność []]: sprawdzone, dzięki!
Alejandro Quiroz
30
Po co korzystać, $('#checkArray :checkbox:checked').length > 0;gdy prostsze $('#checkArray').checkeddziała i jest dostępne w większej liczbie wersji?
Don Cheadle
5
@Oddman to działa, tylko nie na obiekcie jquery. zamiast $ (elem) .checked, spróbuj elem.checked.
Dan Williams
1
@DanWilliams tak, ale nie w podanym przykładzie mmcrae.
Oddman,
Drugi zadziałał dla mnie. Dzięki!! var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
David Silva-Barrera
2025
$('#' + id).is(":checked")

Dzieje się tak, jeśli pole wyboru jest zaznaczone.

W przypadku tablicy pól wyboru o tej samej nazwie możesz uzyskać listę zaznaczonych pól poprzez:

var $boxes = $('input[name=thename]:checked');

Następnie, aby przejrzeć je i zobaczyć, co jest zaznaczone, możesz:

$boxes.each(function(){
    // Do stuff here with this
});

Aby sprawdzić, ile jest zaznaczonych, możesz:

$boxes.length;
John Boker
źródło
2
Innym sposobem jest $('#'+id).attr('checked')odpowiednik $('#' + id).is(":checked")IMO, ale łatwiejszy do zapamiętania.
Zubin
85
@Zubin: Ostrożnie .attr('checked'). Jego zachowanie zmieniło się w jQuery 1.6. Kiedyś zwracał falselub true. Teraz zwraca undefinedlub "checked". .is(':checked')nie ma tego problemu.
Joey Adams,
1
@John Boker: przepraszam za komentarz dotyczący nekrozy, ale dlaczego wydaje się, że $('.ClassName').is(':checked')nie działa, ale $('#' + id).is(":checked")działa? poza tym, że ktoś szuka według identyfikatora, a drugi według nazwy klasy.
Mike_OBrien 16.04.13
@Mike_OBrien Problemem może być to, że istnieje więcej niż jedno pole wyboru o tej nazwie klasy. Jest („: zaznaczony”) tak naprawdę działa tylko na jednym elemencie.
John Boker,
5
Uwaga: size () jest przestarzałe od jQuery 1.8 - zamiast tego użyj .length
JM4
312
$('#checkbox').is(':checked'); 

Powyższy kod zwraca wartość true, jeśli pole wyboru jest zaznaczone, lub false, jeśli nie.

Prasanna Rotti
źródło
6
bardzo przydatne przy użyciu $ (this) .is (': zaznaczone'); Dzięki!
PinoyStackOverflower
W ten sposób można sprawdzić, czy pole wyboru jest zaznaczone, a jeśli wiesz, jak je zaznaczyć, dziękuję
Omar Isaid
To działało dla mnie, użyłem tego wcześniej, var isChecked = $('#CheckboxID').attr('checked') ? true : false; ale nie zawsze zwracałem prawidłową wartość. Więc dziękuję!
leiit
120

Przydatne są wszystkie następujące metody:

$('#checkbox').is(":checked")

$('#checkbox').prop('checked')

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

Zaleca się, aby unikać DOMelement lub wbudowanego „this.checked” zamiast tego jQuery na metodzie powinien być używany jako detektor zdarzeń.

justnajm
źródło
98

Kod jQuery, aby sprawdzić, czy pole wyboru jest zaznaczone:

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

Alternatywnie:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}
Kundan Roy
źródło
4
Pierwsze rozwiązanie brakuje :... prawidłowa brzmi: if(('input[name="checkBoxName"]').is(':checked')).
Aerendir,
Powinien być brakujący znak dolara ($) if($('input[name="checkBoxName"]').is(':checked')).
Penny Liu,
Drugi nigdy nie uruchomi elsebloku, ponieważ obiekt jQuery, nawet jeśli nie zawiera pasujących elementów, jest „prawdziwy”. Dodaj .lengthdo końca, a potem mówisz.
Heretic Monkey,
69

Najważniejszą koncepcją, o której należy pamiętać o sprawdzonym atrybucie, jest to, że nie odpowiada on sprawdzonej właściwości. Atrybut faktycznie odpowiada właściwości defaultChecked i powinien być używany tylko do ustawiania początkowej wartości pola wyboru. Sprawdzona wartość atrybutu nie zmienia się wraz ze stanem pola wyboru, podczas gdy sprawdzana właściwość zmienia się. Dlatego zgodnym z wieloma przeglądarkami sposobem ustalenia, czy pole wyboru jest zaznaczone, jest użycie właściwości

Możliwe są wszystkie poniższe metody

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 
Techie
źródło
38

Możesz użyć tego kodu,

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}
Mohammed Shaheen MK
źródło
29

Zgodnie z jQuery dokumentacją istnieją następujące sposoby sprawdzenia, czy pole wyboru jest zaznaczone, czy nie. Rozważmy na przykład pole wyboru (Sprawdź działający jsfiddle ze wszystkimi przykładami)

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

Przykład 1 - z zaznaczoną

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Przykład 2 - z jQuery jest, UWAGA -: zaznaczone

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Przykład 3 - Z propozycją jQuery

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Sprawdź Działający jsfiddle

Subodh Ghulaxe
źródło
26

Możesz spróbować:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
Wisznu Sharma
źródło
To już nie jest dobry sposób na robienie rzeczy, ponieważ attrodzwierciedla tylko wartość atrybutu w HTML, a nie wartość właściwości w DOM. Zapoznaj się z dokumentacjąattr , w której jest napisane: „Aby pobrać i zmienić właściwości DOM, takie jak elementy checked, selectedlub disabledstan formularza, użyj .prop()metody.” Oraz dokumentacjęprop , w której jest napisane: „ .prop()Metodę należy ustawić, disableda checkedzamiast tego o .attr()metodzie „.
Heretic Monkey,
21

Możesz użyć dowolnego z poniższych zalecanych kodów według jquery.

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};
wytrzymać
źródło
20

Wiem, że OP chce jquery, ale w moim przypadku odpowiedzią była czysta JS, więc jeśli ktoś taki jak ja jest tutaj i nie ma jquery lub nie chce jej używać - oto odpowiedź JS:

document.getElementById("myCheck").checked

Zwraca true, jeśli dane wejściowe o identyfikatorze myCheck są sprawdzone, a false, jeśli nie jest sprawdzone.

Proste.

Połączyć
źródło
11
co oznacza, że $("#myCheck")[0].checkedbędzie działać w jquery! : D
Sancarn
10

Możesz to zrobić po prostu jak;

Working Fiddle

HTML

<input id="checkbox" type="checkbox" />

jQuery

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

lub nawet prościej;

$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");

Jeśli checkboxzaznaczone, zwróci trueinaczejundefined

Aamir Shahzad
źródło
or even simpler;->$("#checkbox").checked
Don Cheadle
10

Z tego często korzystam:

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

Jeśli zostanie sprawdzony, zwróci 1; w przeciwnym razie zwróci 0.

Rtronic
źródło
7

Prosta wersja demonstracyjna do sprawdzania i ustawiania pola wyboru.

jsfiddle !

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});
Iluzja
źródło
7

Wystarczy powiedzieć w moim przykładzie, że sytuacja była oknem dialogowym, które następnie weryfikowało pole wyboru przed zamknięciem okna dialogowego. Żadne z powyższych i jak sprawdzić, czy pole wyboru jest zaznaczone w jQuery? i jQuery, jeśli pole wyboru jest zaznaczone, również nie działało.

Na końcu

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

To zadziałało, wywołując klasę, a następnie identyfikator. zamiast samego identyfikatora. Przyczyną może być zagnieżdżone elementy DOM na tej stronie. Obejście było powyżej.

VH
źródło
6

Dla pola wyboru z identyfikatorem

<input id="id_input_checkbox13" type="checkbox"></input>

możesz po prostu zrobić

$("#id_input_checkbox13").prop('checked')

otrzymasz truelub falsejako wartość zwracaną dla powyższej składni. Można go użyć w klauzuli if jako normalne wyrażenie logiczne.

Aniket Thakur
źródło
5

Coś takiego może pomóc

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}
Abdul Hamid
źródło
5

Właściwie według jsperf.com , operacje DOM są najszybsze, następnie $ (). Prop (), a następnie $ (). () !!

Oto składnie:

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

Ja osobiście wolę .prop(). W przeciwieństwie do .is()tego można go również użyć do ustawienia wartości.

Czarna pantera
źródło
4

Zaznacz pole wyboru zaznaczone

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
sourceboy
źródło
2

Za pomocą tego kodu można zaznaczyć, że co najmniej jedno pole wyboru jest zaznaczone lub nie w różnych grupach pól wyboru lub z wielu pól wyboru. Za pomocą tego nie można wymagać usunięcia identyfikatorów ani identyfikatorów dynamicznych. Ten kod działa z tymi samymi identyfikatorami.

Link referencyjny

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>
Parth Patel
źródło
Podstawowe informacje: identyfikatory elementów HTML nie powtarzają się (np .: id = "checkbox2", id = "checkbox3"). To nie jest dobra praktyka. Możemy użyć klasy wiele razy na stronie.
Anand Somasekhar
1

Ponieważ jest połowa 2019 roku, a jQuery czasami zajmuje miejsce na zapleczu takich rzeczy, jak VueJS, React itp. Oto opcja nasłuchiwania JavaScript z czystą wanilią:

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>
Dotacja
źródło
0

Twoje pytanie nie jest jasne: chcesz podać „id pola tablicy wyboru” na wejściu i uzyskać true/falsena wyjściu - w ten sposób nie będziesz wiedział, które pole wyboru zostało zaznaczone (jak sugeruje nazwa funkcji). Poniżej moja propozycja ciała, isCheckedByIdktóre przy wejściu weź pole wyboru idi przy zwrocie wyniku true/false(to bardzo proste, ale twój identyfikator nie powinien być słowem kluczowym),

this[id].checked

Kamil Kiełczewski
źródło
-7

użyj kodu poniżej

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>
Code_Worm
źródło
Naprawdę? Co powiesz na$(function() { $("[id$='chkSendMail']").on("change", ShowMailSection); });
mplungjan,
Wszystkie są $("[id$='chkSendMail']:checked]")
polami