jQuery:チェックボックスがチェックされていないかどうかをテストする


110

これを理解するのに苦労しています。私は2つのチェックボックスを持っています(将来的にはもっと増えるでしょう):

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

基本的に、私はifステートメントを記述し、それらの1つがチェックされ、もう1つがチェックされていないかどうかをテストします。以下を達成する最も簡単な方法は何ですか?

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
     $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
        // do something
}

3
使用し||ていない&&かどうかを確認するためにどちらかがチェックされます。両方がチェックされている&&かどうかをチェックします。
j08691

回答:


213

私が使用する1つの信頼できる方法は次のとおりです。

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    //do something
}

チェックした要素を反復処理する場合は、親要素を使用します

$("#parentId").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
        //do something
    }
});

より詳しい情報:

すべてのチェックボックスには、チェックボックスの実際の状態を格納するプロパティがチェックされているため、これはうまく機能します。必要に応じて、ページを調べてチェックボックスをオンまたはオフにすると、「checked」属性(存在する場合)が同じままであることがわかります。この属性はチェックボックスの初期状態のみを表し、現在の状態は表しません。現在の状態は、そのチェックボックスのdom要素のcheckedプロパティに格納されます。

HTMLのプロパティと属性を参照


2
うーん...これはちょうど設定されますchecked = true
Naftali別名Neal '11 / 07/19

@Pablo-以下の私の回答を確認してください。これも信頼できる/適切なオプションです。
Aneesh Vijendran 2013年

@PabloMescherね,、助けてくれませんか?実際にどのチェックボックスがチェックされているかを確認したいのですか?そして、その隣のテキストボックスを有効/無効にします。どんな助けも高く評価されます。
1lastBr3ath 2014年

@ 1lastBr3ath確かに、jQueryを使用している場合は、チェックボックスに関連するテキストボックスのセレクターを見つけて、2番目の例を使用する必要があります。if($(this).prop( 'checked')){$(this).find( "<textboxSelector>")。attr( "disabled"、true);のようになります。}
パブロメッシャー2014年

1
この場合の@Stophfaceは、計算されたプロパティであり文字列ではないため、このプロパティは常にブール値となり、==を使用して回避できます。これは常にそうであるとは限らないため、常に===を使用するのが賢明です
Pablo Mescher

77
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
    // do something if the checkbox is NOT checked
}

31

jQuery .not()メソッドまたは:not()セレクターを使用することもできます。

if ($('#checkSurfaceEnvironment').not(':checked').length) {
    // do stuff for not selected
}

JSFiddleの例


その他の注意事項

:not() セレクターの jQuery APIドキュメントから:

.NOT() メソッドは、に、複雑なセレクタまたは変数をプッシュするよりも読みやすい選択肢をご提供することになりますではない(): セレクタフィルタ。ほとんどの場合、これはより良い選択です。


1
!$( "#checkSurfaceEnvironment")。is( ":checked")はブール値を返します。チェックボックスがオフの場合はtrueです。$( '#checkSurfaceEnvironment')。not( ':checked')は、DOM要素の配列を返します。これを「if」でテストすると、セレクターに一致するものがなく、配列が空であっても「true」が返されます。答えが正しい可能性がある唯一の方法は、i $( '#checkSurfaceEnvironment')。not( ':checked')。lengthをテストした場合です。これは0または1を返します
Thibault Witzig

22

別の方法:

これが実際の例であり、ここにコードがあります。propも使用する必要があります。

$('input[type="checkbox"]').mouseenter(function() { 
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        alert("is checked");
    } else {
         //$(this).prop('checked',true);
        alert("not checked");
    }
});​

チェックされた属性を切り替える方法をコメントアウトしました。



6

私はavijendrが提案するようなより直接的な実装を探していました。

私は彼/彼女の構文に少し問題がありましたが、これはうまくいきました:

if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)

私の場合、クラスのテーブルuser-formsがあり、文字列が含まcheckPrintれているチェックボックスidがオフになっていないかどうかを確認していました。


5

チェックボックスがチェックされているかどうかをチェックする最も簡単な方法(jQueryを使用)は次のとおりです。

「オン」の場合:

if ($(this).is(':checked')) {
// I'm checked let's do something
}

「チェックされていない」場合:

if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}

4

ここにこの質問のスニペットがあります。

$(function(){
   $("#buttoncheck").click(function(){
        if($('[type="checkbox"]').is(":checked")){
            $('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");
        }else{
            $('.checkboxStatus').html("Sorry! Checkbox is not checked");
         }
         return false;
   })
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label>
      <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
      Checkbox</label>
    <br>
    <label>
      <input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
      Checkbox</label>
    <br>
  </p>
  <p>
    <input type="reset" value="Reset">
    <input type="submit" id="buttoncheck" value="Check">
  </p>
  <p class="checkboxStatus"></p>
</form>


3

.attr()あなたが持っているようにそれを行うには、チェックされているかどうかを確認し.attr("checked", "checked")ます.attr("checked") == undefined


1

すべてのチェックボックスがdivでチェックされている場合はtrueを返します

function all_checked (id_div){
 all_checked = true;

 $(id_div+' input[type="checkbox"]').each(function() { 
    all_checked = all_checked && $('this').prop('checked');
 }

 return all_checked;
}

1

シンプルでチェックしやすい、またはチェックされていない状態

<input type="checkbox" id="ev-click" name="" value="" >

<script>
    $( "#ev-click" ).click(function() {
        if(this.checked){
            alert('checked');
        }
        if(!this.checked){
            alert('Unchecked');
        }
    });
</script>

1

これを試して

if ($("#checkSurfaceEnvironment-1:checked").length>0) {
    //your code in case of NOT checked
}

上記のコードでは、Idで要素を選択してから、(#checkSurfaceEnvironment-1)チェックされた状態を(:checked)フィルターで除外しています。

チェックされた要素オブジェクトの配列を返します。配列にオブジェクトが存在する場合、条件が満たされます。


あなたの答えは役立つかもしれませんが、少なくとも理由を説明する必要があります。現状では、あなたの回答は低品質投稿のモデレーションキュー(私が表示している場所)に渡されました。説明を追加するには、回答を編集することをお勧めします。
Chris Spittles、2016

1

状態を確認する方法は2つあります。

if ($("#checkSurfaceEnvironment-1").is(":checked")) {
    // Put your code here if checkbox is checked
}

または、これも使用できます

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    // Put your code here if checkbox is checked
}

これがお役に立てば幸いです。


1

ここに与えられた最も簡単な方法です

 <script type="text/javascript">

        $(document).ready(function () {
            $("#chk_selall").change("click", function () {

                if (this.checked)
                {
                    //do something
                }
                if (!this.checked)
                {
                    //do something

                }

            });

        });

    </script>


0

私はこれがすでに回答されていることを知っていますが、それでも、これはそれを行うための良い方法です:

if ($("#checkbox").is(":checked")==false) {
    //Do stuff here like: $(".span").html("<span>Lorem</span>");
}

0
if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}

4
これは著者の質問に答えるかもしれませんが、説明する単語やドキュメントへのリンクが不足しています。生のコードスニペットは、周りにいくつかのフレーズがないとあまり役に立ちません。また、良い答えの書き方も非常に役立ちます。回答を編集してください- レビューから
Nick

-4
$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
        var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
    if (item.is(":checked")==true) {
        //execute your code here
    }

    else if (item.is(":not(:checked)"))
    {
        //execute your code here
    }

});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.