Question

我有一个包含多个问题的表格（动态创建的问卷）。我已经使用jQuery将无线电设计为按钮（http://jqueryui.com/demos/button/#radio），但我在这里略微减少了代码......

<div class="yesnoradios">
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_Y" value="Y" />Yes
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_N" value="N" />No
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_NA" value="NA" />N/A
</div>

所以，我有上面的多个实例，动态命名为id。

我很难在客户端验证提交表单。我需要做的是确保为每个问题选择一个答案。我没有很多jQuery的经验，所以我到目前为止所做的就是围绕每个问题。

$('.yesnoradios').each(function(index) {
    alert($(this).attr("id"));
});

我想我会提到，当用英语查看页面时，它使用的是select而不是单选按钮，我能够很好地验证，但我之所以不能使用它例如，用户正在以一种语言查看页面，其中“是”或“否”的等效项根据您构造问题的方式而有所不同，所以我使用的是刻度和十字架。

提前感谢您的帮助。

编辑：我尝试做的是使用.children（）函数检查是否已检查一个，如果没有设置表示表单无效的标志。但是我无法正确使用语法，并且还没能为此找到一个好的代码示例。

Answer 1

假设你有很多以下......

<div class="yesnoradios">
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_Y" value="Y" />Yes
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_N" value="N" />No
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_NA" value="NA" />N/A
</div>

您可以使用它来查看是否使用以下代码

选择了所有组中的至少一个

$('.yesnoradios input[type=radio]:checked').length

这将为您提供已检查的组的确切数量。用class="yesnoradios"的no检查它，如果你有相同的no，那么每个yesnoradio div中至少有一个无线电已被检查

if($('.yesnoradios').length == $('.yesnoradios input[type=radio]:checked').length){
    //all groups have at least one radio checked
}else{
    //not all are chedked and you can loop your else logic here
}

注意：一个组中的所有无线电都应该具有相同的名称...并且由于您在此处发布了未呈现的html，我认为它会这样做。

Answer 2

if ($('input[name='+ radioName +']:checked').length) {
           // at least one of the radio buttons was checked
           return true; // allow whatever action would normally happen to continue
      }
      else {
           // no radio button was checked
           return false; // stop whatever action would normally happen
      }

Answer 3

试试这个。你的HTML应该像

radio buttons with class "optionCls" in a div with id question1
radio buttons with class "optionCls" in a div with id question2
.
.

现在你可以像

一样推荐它

if($('#question1.optionCls :checked').length() > 0) 
     alert('valid'); //will tell you for question1 whether answer is selected or not

构建逻辑以使其成为动态

使用jQuery验证单选按钮

3 个答案: