jQueryでチェックボックスがチェックされているかどうかを確認するには?


Answers

jQueryのis()関数を使う:

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

私はチェックボックスのチェックされたプロパティをチェックし、jQueryを使ってチェックされたプロパティに基づいてアクションを実行する必要があります。

たとえば、年齢チェックボックスがチェックされている場合は、年齢を入力するテキストボックスを表示し、テキストボックスを非表示にする必要があります。

しかし、次のコードはデフォルトでfalseを返します。

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

checkedプロパティを正常にクエリするにはどうすればいいですか?




この例はボタン用です。

以下を試してください:

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



私はあなたがこれを行うことができると信じている:

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



トップの答えは私のためにそれをしませんでした。 これはやった:

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

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

基本的に、要素#li_13がクリックされると、要素#attが一致するかどうか(チェックボックス)が.attr('checked')関数を使用してチェックされているかどうかがチェックされます。 そうであれば#saveForm要素をフェードインし、そうでなければsaveForm要素をフェードアウトします。




あなたが使用することができます:

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

どちらもうまくいくはずです。




私のやり方はこうです:

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



jQuery 1.6+

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

jQuery 1.5以下

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

jQueryのすべてのバージョン

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

すべての信用はXian行きます。




これは私のために働いた:

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

isAgeSelectedはコントロールのIDです。

また、@ karim79のanswerはうまくいきます。 私はそれをテストしたときに私が逃したものがわからない。

注:これは、Microsoft Ajaxを使用した回答であり、jQueryでは使用していません。




チェックボックスがオンになっているかどうかを確認する方法はたくさんあります。

jQueryを使って確認する方法

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

例を確認してください。




私はそれが単純なものになると思う

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



これは同じことをするいくつかの異なる方法です:

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




checkboxプロパティのClickイベントハンドラの使用は信頼できません。これは、 checkedプロパティがイベントハンドラ自体の実行中に変更さchecked可能性があるためです。

理想的には、チェックボックスの値が変更されるたびに(変更の仕方に関係なく)起動されるなど、 changeイベントハンドラにコードを挿入するのが理想的です。

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

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



jQuery 1.6以降、 jQuery.attr()動作は変更されており、ユーザーはそれを使用して要素のchecked状態を取得しないように推奨されています。 代わりに、 jQuery.prop()を使用してください:

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

他に2つの可能性があります。

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



私はこれを使用しています:

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

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



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

入力がチェックされてfalse場合はtruetrueない場合はfalse返しtrue