1

我有一个动态生成的单选按钮列表。单选按钮的名称也是动态生成的。第一行单选按钮名称为 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>
4

5 回答 5

2

假设每行单选按钮被包装到特定元素（例如 a<fieldset>或 a <tr>）中，您可以轻松检查（在提交事件中）包装元素的数量是否等于所选单选的数量，使用

var group = $('#yourform tr');
if (group.length === group.find('input[type="radio"]:checked').length) {
   /* you choose one radio for each group */
}
于 2012-07-25T10:14:11.170 回答
0

像这样：

演示： 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 */  
}
于 2012-07-25T10:10:09.580 回答
0

我认为您可以向#row1、#row2 之类的行添加类或ID。之后它相当容易

// 为您提供在第一行中选中的单选按钮的数量
// $('input[type=radio]:checked', '#row1')

// 为您提供第二行中选中的单选按钮的数量
// $('input[type=radio]:checked', '#row2')

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

 // 你的代码在这里
}
于 2012-07-25T10:11:24.823 回答
0

试试这个

 var names = {};
  $(':radio').each(function() {
      names[$(this).attr('name')] = true;
  });
 var count = 0;
 $.each(names, function() { 
     count++;
  });
if ($(':radio:checked').length === count) {
    //All Checked
}
于 2012-07-25T10:11:52.123 回答
0

在下面的演示链接上，我已经为上述问题完成了完整的垃圾箱。所以请检查一下它可能对你有帮助。

演示： 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;
}

查询：

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

于 2012-07-25T14:46:12.460 回答