2012-02-15 13 views
3

私のHTMLフォームには多くのチェックボックスグループが含まれています。すべてのグループから少なくとも1つのチェックボックスが選択されているかどうかチェックしたいと思います。少なくとも一つのチェックボックスが Jqueryでチェックボックスグループを見つける方法

if($(":checkbox:checked[vehicle]").length) > 1 
if($(":checkbox:checked[language]").length) > 1 

を選択した場合など

については

// Group vehicle 
<input type="checkbox" name="vehicle" value="Bike"/> I have a bike<br /> 
<input type="checkbox" name="vehicle" value="Car"/> I have a car <br/> 

// Group language 
<input type="checkbox" name="language" value="JS"/> I am JS Ninja <br/> 
<input type="checkbox" name="language" value="Android"/> I am a droid <br/> 

は、私が確認するには、次のjQueryのセレクタを使用することができますしかし、私は、すべてのチェックボックスグループのために、このセレクタを繰り返す必要があります。私のページには多くのチェックボックスグループが含まれています。単一のjqueryセレクタですべてのチェックボックスグループを選択できる他の方法はありますか?

ありがとうございます!

答えて

1

約束通りに更新された後は、元のサンプルコードを完全にテストする時間がありました。 D

jQueryのチェックボックスのセレクタを何度も繰り返さないことで、もう少し効率的になりました。

そして結果:

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
     function checkedTest() { 
      var nameArr = new Array(); 
      var finalResult = true; 
      var allCheckboxes = $("input[type=checkbox]"); 

      // Put all the unique name attributes in an array. 
      allCheckboxes.each(function(){ 
       var name = $(this).attr("name"); 
       if($.inArray(name, nameArr) == -1) 
        nameArr.push(name); 
      }); 

      // Go through each name attribue and make sure at least one is checked. 
      $.each(nameArr, function(index, value){ 
       if(allCheckboxes.filter("[name=" + value + "]:checked").length == 0) 
        finalResult = false; 
      }); 

      return finalResult; 
     } 
    </script> 
</head> 
<body> 
    Group1Box1: <input type="checkbox" id="group1Box1" name="group1"/> 
    Group1Box2: <input type="checkbox" id="group1Box2" name="group1"/> 
    <br/> 
    Group2Box1: <input type="checkbox" id="group2Box1" name="group2"/> 
    Group2Box2: <input type="checkbox" id="group2Box2" name="group2"/> 
    <br/> 
    Group3Box1: <input type="checkbox" id="group3Box1" name="group3"/> 
    Group3Box2: <input type="checkbox" id="group3Box2" name="group3"/> 
    <br/><br/> 
    <input type="button" value="Test!" onclick="alert(checkedTest());"/> 
</body> 
</html> 
+0

あなたは可能性があり最適そこにいくつかのものをize試していないが、私はupvoteによって動作すると思う。 – elclanrs

+0

@ b1naryj:いいですね。私が試してみましょう。ありがとう。 – xyz

+0

@elclanrs絶対、そういうわけで私は一番上に免責事項を付けました。それは直接コピーの貼り付けとして意味されませんが、適応することができる問題の解決策を示しています。 – Timeout

-3

私はこれがあなたのために働くだろうと思う:

$('.submit').click(function() { 
    var vehicles= $("input[name='vehicle']").serializeArray(); 
     alert(vehicles.length + ' vehicles selected.'); 
    var languages = $("input[name='language']").serializeArray(); 
    alert(languages .length + ' languages selected.'); 
}); 

あなたはその後、chkbxの長さを確認することができます。ここでは、それを使用することができます方法は次のとおりです。

http://jsfiddle.net/WTudu/5/

+0

私はこれが問題を解決するとは思わない。彼はすべてのチェックボックスをつかんで、各グループに少なくとも1つが選択されているかどうかチェックしたい。 – elclanrs

+0

これはどうですか?この例ではグループ化が示されているので、これはグループごとに行われます。証明のためにjsfiddleをチェックしてください.... – OnResolve

+0

ちょうど投稿にフィドルからのものを入れてください。このような状況では、文脈からはずれたこの1行のコードは無意味です。あなたの実装は素晴らしいと思われるので、プレビューよりもむしろ、バットからすぐに動作するものを見ています。 – Purag

3

ロジックは、私がb1naryjのソリューションの作品を作ることができなかった正しいように見えたにもかかわらず。
私は彼の例から、それに取り組んで、最終的にはそれが働いてしまっ続け:

例:http://jsfiddle.net/elclanrs/GFCKA/1/

jQの:

var testCheckboxes = function(){ 
    var $checkboxes = $(':checkbox'), 
     names = [], 
     num = 0; 
    $checkboxes.each(function(){ 
     var name = $(this).attr('name'); 
     if ($.inArray(name, names) === -1) { 
      names.push(name); 
     } 
    }); 
    $.each(names, function(i, v){ 
     if ($checkboxes.filter('[name="'+v+'"]:checked').length >= 1) { num++; } 
    }); 
    if (num === names.length) { alert('Yup!'); } 
}; 
+0

私は** b1naryjs **の答えを編集しました。その仕事は私が推測する。見てみましょう。 – xyz

+0

私は試みましたが、私はそれを動作させることができませんでした。投稿したjsfiddleがうまくいかなかったことに気づいた。私はそれを更新しました。 – elclanrs

+0

'inArray($(this)).attr(" name ")、nameArr'に問題がありました。私の編集をチェックしてください。http://stackoverflow.com/posts/9287311/revisions – xyz

0
// If you know the names just setting its here like var names = ["vehicle","language"] 
var names = []; 
// Find out the checkbox group names 
$(":checkbox").each(function(){ 
    names.push(this.name); 
}); 
names = $.unique(names); 

var pass = true; 
$.each(names, function(){ 
    if(!pass) return; 
    pass = !!$("[name=" + this + "]:checkbox:checked").length; 
}); 
alert("Pass? " + pass); 

アウトHERE

+0

提案していただきありがとうございます。 – xyz

関連する問題