web-dev-qa-db-ja.com

jQuery：チェックボックスがチェックされていないかテストする

これを理解するのに問題があります。私は2つのチェックボックスを持っています（将来的にはもっと多くなるでしょう）。

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

基本的には、if文を書いて、片方がチェックされ、もう片方がチェックされていないかテストします。以下を達成するための最も簡単な方法は何ですか。

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

私が使っている信頼できる方法の1つは、

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

チェックされた要素を繰り返し処理したい場合は、親要素を使用してください。

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

より詳しい情報：

すべてのチェックボックスにチェックボックスの実際の状態を格納するプロパティcheckedがあるため、これはうまく機能します。あなたが望むなら、あなたはページを調べてチェックボックスをチェックしてチェックを外してみることができます、そしてあなたは属性 "checked"（もしあれば）が変わらないことに気付くでしょう。この属性は、チェックボックスの初期状態のみを表し、現在の状態は表しません。現在の状態は、そのチェックボックスのdom要素のcheckedプロパティに格納されています。

HTMLの プロパティと属性 をご覧ください。

189
Pablo Mescher
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
    // do something if the checkbox is NOT checked
}
72
shweta

JQuery .not() methodまたは :not() selectorのいずれかを使用することもできます。

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

JSFiddleの例

その他の注意事項

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

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

28
Aneesh Vijendran

代替方法

これが 実用的な例 で、これがコードです。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");
    }
});​

Checked属性を切り替える方法についてコメントしました。

21
Trufa
if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )
8
Zoltan Toth

私はavijendrが提案したようなもっと直接的な実装を探していました。

私は彼/彼女の文法に少し問題を抱えていました、しかし私はこれを働かせました：

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

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

5
MsGirlPerl

あなたがそうであるように.attr()でそれをするために、それがチェックされるかどうか見るためにそれは.attr("checked", "checked")であり、そうでなければそれは.attr("checked") == undefinedであろう

3
jezza-tan

ここで私はこの質問の抜粋をします。

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

チェックボックスがチェックされているかどうかをチェックする（jQueryを使った）最も簡単な方法は、

'checked'の場合：

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

（チェックされていない）場合：

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

状況を確認する方法は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
Gaurang Sondagar

これを試してください

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

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

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

1
Satish Kumar sonker

すべてのchecboxが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
Martin Da Rosa

シンプルでチェックしやすい、または未チェックの状態

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

これが最も簡単な方法です

 <script type="text/javascript">

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

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

                }

            });

        });

    </script>
1
Debendra Dash

私はこれを使用して私のために働いた！

$("checkbox selector").click(function() {
    if($(this).prop('checked')==true){
       do what you need!
    }
});
0
Seyed

私はこれがすでに答えられていることを知っています、それでも、これはそれをするための良い方法です：

if ($("#checkbox").is(":checked")==false) {
    //Do stuff here like: $(".span").html("<span>Lorem</span>");
}
0
Hello World
if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}
0
Rutvik kakadiya