Hoe controleer ik of een selectievakje is aangevinkt in jQuery?

$(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="https://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Antwoord 19

Gebruik dit:

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

De lengte is groter dan nul als het selectievakje is aangevinkt.

Antwoord 20

Mijn manier om dit te doen is:

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

Antwoord 21

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

Dit retourneert trueals de invoer is aangevinkt en falseals dit niet het geval is.

Antwoord 22

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

Antwoord 23

U kunt gebruiken:

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

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

Beide zouden moeten werken.

Antwoord 24

1) Als uw HTML-opmaak is:

<input type="checkbox"  />

attr gebruikt:

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

Als prop wordt gebruikt:

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

2) Als uw HTML-markup:

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

Attward:

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

Prop gebruikt:

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

25

Dit voorbeeld is voor knop.

Probeer het volgende:

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

Antwoord 26

Het beste antwoord deed het niet voor mij. Dit deed het echter wel:

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

Als er op het element #li_13 wordt geklikt, wordt in principe gecontroleerd of het element # akkoord (wat het selectievakje is) is aangevinkt met behulp van de functie .attr('checked'). Als het dan fadeIn het #saveForm element is, en zo niet fadeOut het saveForm element.

Antwoord 27

Hoewel u een JavaScript-oplossing voor uw probleem heeft voorgesteld (een textboxweergeven wanneer een checkboxcheckedis), kan dit probleem worden opgelost gewoon door css. Met deze aanpak werkt uw formulier voor gebruikers die JavaScript hebben uitgeschakeld.

Ervan uitgaande dat je de volgende HTML hebt:

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

U kunt de volgende CSS gebruiken om de gewenste functionaliteit te bereiken:

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

Voor andere scenario’s kunt u geschikte CSS-kiezers bedenken.

Hier is een viool om deze aanpak te demonstreren.

Antwoord 28

Ik gebruik dit:

<input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />
 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

Antwoord 29

Toggle: 0/1 of anders

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