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

我认为你可以在类＃row1，＃row2等行中添加类或id。之后很容易

// 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

如何检查一组所有选中的单选按钮？

5 个答案: