2011-12-23 7 views
1

JQueryでチェックボックスグループを検証するにはどうすればよいですか?各グループで、少なくとも1つのチェックボックスが選択されていることを確認する必要があります。私はグループを識別するためにクラスを使用したいのですが、そう、HTMLは次のようになります。JQuery複数チェックボックスグループ検証

<!-- checkbox group --> 
<fieldset class="CbxGroup"> 
    <legend>Checkbox Group (required)</legend> 
    <label><input type="checkbox" name="cbxGroup1[]" value="one" id="cbxGroup1_0">One </label> 
    <br> 
    <label><input type="checkbox" name="cbxGroup1[]" value="two" id="cbxGroup1_1">Two </label> 
    <br> 
    <label><input type="checkbox" name="cbxGroup1[]" value="three" id="cbxGroup1_2">Three</label> 
    <br> 
    <label><input type="checkbox" name="cbxGroup1[]" value="four" id="cbxGroup1_3">Four </label> 
    <br> 
    <label><input type="checkbox" name="cbxGroup1[]" value="five" id="cbxGroup1_4">Five </label> 
    <br> 
</fieldset> 

チェックボックスが選択リスト/メニューのようなラッパー要素を持っていないので、私は知りませんこれを取り除く方法。単一のチェックボックスの場合、次のようなことができますが、チェックボックスグループでは機能しません。

ありがとう!

$('.CbxSingle').each(function() { 
     var CbxCheck = $(this); 
     if(!CbxCheck.is(':checked')) { 
      // do something 
     } 
     else{ 
      // do something else 
     } 
    }); 

私は別に、各グループを検証します次のようなものが欲しい:

$('.CbxGroup').each(function() { 
     if ($('input[type=checkbox]:checked').length == 0) { 
      alert('not selected!'); 
     } 
     else{ 
      alert('selected!'); 
     } 
    }); 

答えて

3

は、おそらくこのような何かがうまくいくかもしれない:

if($(".CbxSingle input[type=checkbox]:checked").length != 0){ 
    // Run success code 
}else{ 
    // Run failure code 
} 

は実際には非常に同様の参照がありますチェックされたセレクタのjQueryドキュメンテーションWebサイト:http://api.jquery.com/checked-selector/

希望に役立ちます!

+0

ありがとうございました!これはまさに私が必要としたものでした。私はこれが非常に複雑になると思ったが、それはとても簡単であることが分かった。 – user1002039

+0

おっと!私は早すぎると話しました。別のチェックボックスグループを追加すると、2つの独立したグループではなく1つのグループとして検証されます。どのように私はそれをチークできるようにあらゆるアイデアは、それは別々に各グループを検証する? – user1002039

+0

$(」mcCbxGroup。 ')それぞれ(関数(){ \t \t \t($(' 入力[タイプ=チェックボックス]:チェック '場合。)の長さ== 0){ \t \tアラート(' 選択されていません! '); \t \t} \t他\t { \t \t \t \tアラート(' 選択 ');! \t \t \t} \t \t})。 – user1002039

2

これはあなたが記述何のために働くかもしれない:

var numberChecked=$("input[name='cbxGroup1[]']:checked").length; 
if(numberChecked<1) 
    alert('none checked'); 
else 
    alert(numberChecked+' checked); 
+0

これにより、複数のグループのチェックボックスを持つことができます。フォーム全体でコードを再利用することができます。 –

+0

これはうまくいくとは思わない。私はクラス名を持つグループを特定する必要があります。つまり、グループ内のすべてのチェックボックスを特定し、少なくとも1つが選択されていることを確認する必要があります。そうすれば、私は複数のグループを持つことができ、グループごとにコードを別々に書かなくても、すべて同じ方法で検証することができます。 – user1002039

+0

すべてのグループの名前を変更できます。これはcbxGroup1 []の場合です.cbxGroup2 []がある場合は、チェックされている変数に別の変数を設定します。 http://jsfiddle.net/Ygcc8/ –

0

は私がわずかvariation as a fiddleを作成し、正常に動作するようです。あなたの問題は.CbxSingleクラスがinputに適用されていないと思われるので、​​のような別のセレクタを使用するかもしれません。

+0

上記のシングルチェックボックスのコードは正常に動作します。私が必要とするチェックボックスグループではないので、それぞれ別々のコードを書くことなく複数のグループを持つことができます。 – user1002039

+0

あなたのJavaScriptスニペットの '$( '。CbxSingle')'を '$( 'CbxGroup input [type = checkbox]')'に置き換えてみてください。 – sczizzo

関連する問題