jQueryでチェックボックスがオンになっているかどうかを確認するにはどうすればよいですか?

2009年05月23日に質問されました。  ·  閲覧回数 4.3M回  ·  ソース

Prasad picture
2009年05月23日

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

たとえば、[年齢]チェックボックスがオンになっている場合は、年齢を入力するためにテキストボックスを表示する必要があります。そうでない場合は、テキストボックスを非表示にします。

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

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

回答

karim79 picture
2009年05月23日
3504

チェックされたプロパティを正常にクエリするにはどうすればよいですか?

チェックボックスDOM要素のcheckedプロパティは、要素のchecked状態を提供します。

したがって、既存のコードを考えると、これを行うことができます。

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

ただし、 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>
Bhanu Krishnan picture
2011年06月22日
1934

jQueryのis()関数を使用します。

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
SeanDowney picture
2011年06月24日
590

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

新しいプロパティメソッドの使用:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}
ungalcrys picture
2014年05月21日
244

jQuery 1.6+

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

jQuery1.5以下

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

jQueryの任意のバージョン

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

すべてのクレジットは西安に送られます。

Pradeep picture
2010年08月19日
176

私はこれを使用していますが、これは完全に正常に機能しています。

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

注:チェックボックスがオンの場合、それ以外の場合は未定義のtrueが返されるため、「TRUE」の値を確認することをお勧めします。

Lalji Dhameliya picture
2016年08月29日
164

使用する:

<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
Salman A picture
2012年04月27日
125

jQuery 1.6以降、 jQuery.attr()が変更され、要素のチェック状態を取得するためにそれを使用しないことをお勧めします。 代わりに、 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")
Prasad picture
2009年05月24日
108

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

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

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

また、@ karim79の答えはうまく機能します。 テストしたときに何を見逃したのかわかりません。

これは、jQueryではなくMicrosoftAjaxを使用した回答であることに注意してください

Rajesh Omanakuttan picture
2013年08月25日
93

jqueryの更新バージョンを使用している場合は、問題を解決するために.propメソッドを使用する必要があります。

$('#isAgeSelected').prop('checked')は、チェックされている場合はtrue $('#isAgeSelected').prop('checked')を返し、チェックされていない場合はfalseを返します。 私はそれを確認し、以前にこの問題に遭遇しました。 $('#isAgeSelected').attr('checked')$('#isAgeSelected').is('checked')undefinedを返していますが、これは状況にふさわしい答えではありません。 したがって、以下のようにします。

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

お役に立てば幸いです:)-ありがとう。

Udit Bhardwaj picture
2013年09月29日
68

使用する:

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

これは、チェックを外したときではなく、チェックボックスをオンにしたときにのみ必要なアクションを実行する必要がある場合に役立ちます。