如何檢查所有選中的一組單選按鈕？

Question

我有一個動態生成的單選按鈕列表。單選按鈕的名稱也是動態生成的。單選按鈕的第一行具有名稱1，第二行單選按鈕具有名稱2.每行具有三個具有相同名稱但不同值的單選按鈕。

如何使用jquery檢查每個行中提交表單時是否選中了一個單選按鈕？

<tr> 
          <th>1</th> 
          <td> Please select one option </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="2" value="1" /> 
          </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="2" value="2" /> 
          </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="2" value="3" /> 
          </td> 
         </tr> 
<tr> 
          <th>2</th> 
          <td> Please select another option </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="3" value="1" /> 
          </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="3" value="2" /> 
          </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="3" value="3" /> 
          </td> 
         </tr> 

Answer 1

假設單選按鈕的每一行包裝到一個特定的元素（如<fieldset>或<tr>），你可以很容易地檢查（在提交事件）如果包裝元素的量等於所選擇的無線電的數目，與

var group = $('#yourform tr'); 
if (group.length === group.find('input[type="radio"]:checked').length) { 
    /* you choose one radio for each group */ 
} 

Answer 2

這樣的：

演示：從你更新的代碼和小的變化http://jsfiddle.net/K2WsA/和：http://jsfiddle.net/K2WsA/1/

行爲：在演示選擇這兩個組中至少有一個，你會得到一個警報。

希望它有幫助！根據人名

它們分組：

if($("input[type=radio][name=foo]:checked").length > 0 && 
    $("input[type=radio][name=bar]:checked").length > 0) 
{  
/* do something */ 
} 

Answer 3

我想你可以添加類或ID的行類似＃ROW1，ROW2＃。之後，它的相當容易

 
// gives you the no of radio buttons checked in first row 
// $('input[type=radio]:checked', '#row1') 

// gives you the no of radio buttons checked in second row 
// $('input[type=radio]:checked', '#row2') 

if($('input[type=radio]:checked', '#row1').length > 0 and $('input[type=radio]:checked', '#row2') > 0) { 

// your code goes here 
} 

Answer 4

試試這個

var names = {}; 
    $(':radio').each(function() { 
     names[$(this).attr('name')] = true; 
    }); 
var count = 0; 
$.each(names, function() { 
    count++; 
    }); 
if ($(':radio:checked').length === count) { 
    //All Checked 
} 

Answer 5

這裏下面演示鏈接，我已經做完整二進制位以上問題。所以請檢查一次它可以幫助你。

演示：http://codebins.com/bin/4ldqp9l

HTML：

<table id="table1" cellpadding="0" cellspacing="0" width="70%"> 
    <tr> 
    <th> 
     1 
    </th> 
    <td> 
     Please select one option 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd1" value="1" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd1" value="2" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd1" value="3" /> 
    </td> 
    </tr> 
    <tr> 
    <th> 
     2 
    </th> 
    <td> 
     Please select another option 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd2" value="1" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd2" value="2" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd2" value="3" /> 
    </td> 
    </tr> 
    <tr> 
    <th> 
     3 
    </th> 
    <td> 
     Please select another option 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd3" value="1" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd3" value="2" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd3" value="3" /> 
    </td> 
    </tr> 
</table> 
<br/> 
<input type="button" id="btncheck" name="btncheck" value="Check Radio Selection" /> 
<div id="result"> 
</div> 

CSS：

table#table1{ 
    border:1px solid #225599; 
} 
table#table1 th{ 
    border:1px solid #225599; 
    padding:2px; 
    background:#a48866; 
} 
table#table1 td{ 
    border:1px solid #225599; 
    padding:2px; 
    background:#94dbfd; 
} 
.error{ 
    color:#ca1619; 
} 
.success{ 
    color:#006633; 
} 

JQuery的：

$(function() { 
    $("#btncheck").click(function() { 
     var result = ""; 
     $("table#table1").find("tr").each(function() { 
      var row = $.trim($(this).find("th").text()); 
      if ($(this).find("input[type=radio]:checked").length > 0) { 
       var opValue = $(this).find("input[type=radio]:checked").val(); 
       result += "<p class='success'>Row " + row + ": The option with value \"" + opValue + "\" has been selected... :)</p>"; 
      } else { 
       result += "<p class='error'>Row " + row + ": No option has been selected..!</p>"; 
      } 

      if (result != "") { 
       $("div#result").html(result); 
      } 
     }); 
    }); 
}); 

演示：http://codebins.com/bin/4ldqp9l