Jak sprawdzić, czy pole wyboru jest zaznaczone w jQuery?

Jak pomyślnie odpytywać sprawdzoną właściwość?

Właściwość checked elementu checkbox DOM da ci checked Stan elementu.

Biorąc pod uwagę Twój istniejący kod, możesz więc zrobić to:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Jest jednak o wiele ładniejszy sposób, używając toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Użyj funkcji jQuery is () :

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

Using jQuery > 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

Użycie nowej metody właściwości:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

JQuery 1.6+

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

JQuery 1.5 i poniżej

$('#isAgeSelected').attr('checked')

Dowolna wersja jQuery

// Assuming an event handler on a checkbox
if (this.checked)

Wszystkie zasługi należą do Xian .

Używam tego i to działa absolutnie dobrze:

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

Uwaga: Jeśli pole wyboru jest zaznaczone, zwróci true w przeciwnym razie niezdefiniowane, więc lepiej sprawdzić wartość "TRUE".

Użycie:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

Od jQuery 1.6 zachowanie jQuery.attr() zmienił się i użytkownicy są zachęcani, aby nie używać go do pobierania stanu sprawdzonego elementu. Zamiast tego powinieneś użyć jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Dwie inne możliwości to:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

Jeśli używasz zaktualizowanej wersji jquery, musisz wybrać metodę .prop, aby rozwiązać problem:

$('#isAgeSelected').prop('checked') zwróci true Jeśli zaznaczone i false Jeśli zaznaczone. Potwierdziłem to i natknąłem się na ten problem wcześniej. $('#isAgeSelected').attr('checked') i $('#isAgeSelected').is('checked') powraca undefined, co nie jest godną odpowiedzi na zaistniałą sytuację. Więc zrobić jak podano poniżej.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Mam nadzieję, że to pomoże :) - dzięki.

Użycie:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

Może to pomóc, jeśli chcesz, aby wymagane działanie było wykonywane tylko wtedy, gdy zaznaczysz pole, a nie w momencie usuwania czeku.

Używanie procedury obsługi zdarzenia Click dla właściwości checkbox jest zawodne, ponieważ właściwość checked może się zmieniać podczas wykonywania samej procedury obsługi zdarzenia!

Najlepiej byłoby umieścić swój kod w obsłudze zdarzenia change, np. jest wywoływany za każdym razem, gdy wartość pola wyboru jest zmieniana(niezależnie od jak to się robi).

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});

Wierzę, że możesz to zrobić:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

Postanowiłem opublikować odpowiedź, jak zrobić dokładnie to samo bez jQuery. Tylko dlatego, że jestem buntownikiem.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

Najpierw dostajesz oba elementy po ich ID. Następnie przypisujesz Zdarzenie onchange checkboxe funkcję, która sprawdza, czy pole zostało zaznaczone i odpowiednio ustawia właściwość hidden pola tekstowego age. W tym przykładzie za pomocą operatora trójdzielnego.

Oto skrzypce do przetestowania.

Dodatek

Jeśli problem dotyczy kompatybilności między przeglądarkami, dlatego proponuję ustawić właściwość CSS display na none i inline.

elem.style.display = this.checked ? 'inline' : 'none';

Wolniejszy, ale kompatybilny z przeglądarkami.

Wpadłem do tego samego problemu. Mam ASP.NET checkbox

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

W kodzie jQuery użyłem poniższego selektora, aby sprawdzić, czy checkbox został zaznaczony, czy nie, i wydaje się działać jak urok.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Jestem pewien, że możesz również użyć ID zamiast CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Ten kod pomoże ci

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});

Istnieje wiele sposobów, aby sprawdzić, czy pole wyboru jest zaznaczone, czy nie:

Sposób sprawdzania przy użyciu jQuery

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Sprawdź przykład lub dokument:

• Http://api.jquery.com/attr/

• Http://api.jquery.com/prop/

To działa dla mnie:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

To jest jakaś inna metoda na zrobienie tego samego:

$(document).ready(function (){

    $('#isAgeSelected').click(function() {
        // $("#txtAge").toggle(this.checked);

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Możesz spróbować zdarzenia change checkbox, aby śledzić zmianę stanu :checked.

$("#isAgeSelected").on('change', function() {
  if ($("#isAgeSelected").is(':checked'))
    alert("checked");
  else {
    alert("unchecked");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected" />
<div id="txtAge" style="display:none">
  Age is selected
</div>

Użyj tego:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

Długość jest większa niż zero, jeśli pole jest zaznaczone.

Mój sposób na to:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

$(selector).attr('checked') !== undefined

Zwraca true Jeśli wejście jest zaznaczone i false jeśli nie jest.

$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

Możesz użyć:

  if(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();

if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();

1) Jeśli twój znacznik HTML to:

<input type="checkbox"  />

Attr używany:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Jeśli użyto prop:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Jeśli twój znacznik HTML to:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

Attr używany:

$(element).attr("checked") // Will return checked whether it is checked="true"

Użyty rekwizyt:

$(element).prop("checked") // Will return true whether checked="checked"

Ten przykład jest dla przycisku.

Spróbuj:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});

/ Align = "center" bgcolor = "# e0ffe0 " / cesarz chin / / align = center / To jednak:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

Zasadniczo po kliknięciu elementu # li_13 sprawdza, czy element # agree (który jest checkboxem) jest sprawdzany za pomocą funkcji .attr('checked'). Jeżeli jest to fadeIn elementu # saveForm, a jeśli nie fadeOut elementu saveForm.

Chociaż zaproponowałeś rozwiązanie JavaScript dla swojego problemu (wyświetlanie textbox, Gdy checkbox jest checked), ten problem można rozwiązać tylko za pomocą css. Dzięki takiemu podejściu twój formularz działa dla użytkowników, którzy wyłączyli JavaScript.

Zakładając, że masz następujący HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

Możesz użyć następującego CSS, aby osiągnąć pożądaną funkcjonalność:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

W innych scenariuszach można pomyśleć o odpowiednich selektorach CSS.

Oto Fiddle, aby zademonstrować to podejście .

Używam tego:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

Toggle: 0/1 or else

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

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});