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

Muszę sprawdzić checkedwłaściwość pola wyboru i wykonać akcję na podstawie sprawdzonej właściwości za pomocą jQuery.

Na przykład, jeśli pole wyboru wiek jest zaznaczone, muszę pokazać pole tekstowe, aby wprowadzić wiek, w przeciwnym razie ukryj pole tekstowe.

Ale falsedomyślnie zwraca następujący kod :

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

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

Jak pomyślnie wyszukać checkedwłaściwość?

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

checkedWłaściwość elementu checkbox DOM daje checkedstan elementu.

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

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 is () jQuery :

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

Korzystanie z 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

Za pomocą 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)

Cały kredyt należy do Xian .

Korzystam z tego i działa absolutnie dobrze:

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

Uwaga: Jeśli pole wyboru jest zaznaczone, zwróci true w przeciwnym razie niezdefiniowany, więc lepiej sprawdź wartość „PRAWDA”.

Posługiwać się:

<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 wersji jQuery 1.6 zachowanie się jQuery.attr()zmieniło i użytkownicy są zachęcani do nieużywania go do pobierania stanu sprawdzonego elementu. Zamiast tego należy 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")

To działało dla mnie:

$get("isAgeSelected ").checked == true

Gdzie isAgeSelectedjest identyfikator kontroli.

Również użytkownika @ karim79 odpowiedź działa dobrze. Nie jestem pewien, co przeoczyłem w czasie, gdy to testowałem.

Uwaga: ta odpowiedź używa Microsoft Ajax, a nie jQuery

Jeśli używasz zaktualizowanej wersji jquery, musisz wybrać .propmetodę rozwiązania problemu:

$('#isAgeSelected').prop('checked')zwróci, truejeśli zaznaczone, a falsejeśli niezaznaczone. Potwierdziłem to i natknąłem się na ten problem wcześniej. $('#isAgeSelected').attr('checked')i $('#isAgeSelected').is('checked')powraca, undefinedco nie jest godną odpowiedzią na sytuację. Zrób tak, jak podano poniżej.

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

Mam nadzieję, że to pomaga :) - Dzięki.

Korzystanie z Clickprocedury obsługi zdarzeń dla właściwości checkbox jest zawodne, ponieważ checkedwłaściwość może się zmieniać podczas wykonywania samej procedury obsługi zdarzeń!

Idealnie byłoby, gdybyś chciał umieścić swój kod w changemodule obsługi zdarzeń, takim jak uruchamiany za każdym razem, gdy zmienia się wartość pola wyboru (niezależnie od tego , jak to się robi).

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

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

Posługiwać się:

<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 wymaganą czynność trzeba było wykonać tylko wtedy, gdy zaznaczysz pole, a nie w chwili usunięcia zaznaczenia.

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 według ich identyfikatora. Następnie przypisujesz onchangezdarzenie pola wyboru funkcję, która sprawdza, czy pole wyboru zostało zaznaczone, i odpowiednio ustawia hiddenwłaściwość pola tekstowego wieku. W tym przykładzie za pomocą operatora trójskładnikowego.

Oto skrzypce do przetestowania.

Uzupełnienie

Jeśli problemem jest kompatybilność z różnymi przeglądarkami, proponuję ustawić displaywłaściwość CSS na none i inline .

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

Wolniejszy, ale kompatybilny z różnymi przeglądarkami.

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

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

Natrafiłem na dokładnie ten sam problem. Mam pole wyboru ASP.NET

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

W kodzie jQuery użyłem następującego selektora, aby sprawdzić, czy pole wyboru zostało zaznaczone, czy nie, i wydaje się, że działa jak urok.

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

Jestem pewien, że możesz także użyć identyfikatora zamiast CssClass,

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

Mam nadzieję, że to Ci pomoże.

Istnieje wiele sposobów sprawdzenia, czy pole wyboru jest zaznaczone, czy nie:

Sposób sprawdzenia za pomocą 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/

Ten kod ci pomoże

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

To działa dla mnie:

/* isAgeSelected being id for checkbox */

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

To jest 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>

Użyj tego:

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

Długość jest większa od zera, jeśli pole wyboru jest zaznaczone.

Mój sposób na zrobienie tego to:

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

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

Zwraca się, truejeśli dane wejściowe są zaznaczone, a falsejeśli nie są.

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

Oba powinny działać.

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

<input type="checkbox"  />

zastosowane attr:

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

Jeśli zastosowano rekwizyt:

$(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"

zastosowane attr:

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

Zastosowana prop:

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

Ten przykład dotyczy przycisku.

Spróbuj wykonać następujące czynności:

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

Najlepsza odpowiedź nie zrobiła tego dla mnie. Tak było 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 on, czy element # agree (który jest polem wyboru) jest sprawdzany za pomocą .attr('checked')funkcji. Jeśli jest to fadeIn element #saveForm, a jeśli nie fadeOut element saveForm.

Używam tego:

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

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

Chociaż zaproponowałeś rozwiązanie JavaScript dla swojego problemu (wyświetlanie „a, textboxkiedy checkboxjest” checked), problem ten można rozwiązać tylko przez css . Dzięki takiemu podejściu formularz działa dla użytkowników, którzy wyłączyli JavaScript.

Zakładając, że masz następujący kod 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 przypadku innych scenariuszy możesz pomyśleć o odpowiednich selektorach CSS.

Oto skrzypce, aby zademonstrować to podejście .

Przełącz: 0/1 lub jeszcze

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

Myślę, że to będzie proste

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