单选按钮组,需要选择一个

时间:2018-10-12 16:52:01

标签: jquery jquery-validate

我知道这个问题已经以某种形式提出,但是想看看是否有人回答。我似乎无法弄清楚。我需要在此处在标签旁边放置一个星号,然后让用户选择其中一个选项。我们正在使用validate插件。到目前为止,我已经尝试了很多方法,但都无济于事。有什么想法吗?

//Radio button group that needs one choice to validate, else show an error

<div class="field" >
    <div class="label-cont">
    <label for="null" class="am_radio field-label"> What is the main purpose of this email?</label>
</div>
   <ul title="What is the main purpose of this email?" class="radiolist">
    <li>
        <input name="attribute_service_copy_purpose_value" id="am_attribute_service_copy_purpose_value_0" type="radio" class="amRadio" value="Visibility"><label class="radiolabel" for="am_attribute_service_copy_purpose_value_0">Visibility</label></li>  

          <li>
             <input name="attribute_service_copy_purpose_value" id="am_attribute_service_copy_purpose_value_1" type="radio" class="amRadio" value="Drive Traffic"><label class="radiolabel" for="am_attribute_service_copy_purpose_value_1">Drive Traffic</label></li>

               <li><input name="attribute_service_copy_purpose_value" id="am_attribute_service_copy_purpose_value_2" type="radio" class="amRadio" value="Brand Enhancement"><label class="radiolabel" for="am_attribute_service_copy_purpose_value_2">Brand Enhancement</label></li>
                    </ul>
                        </div>

2 个答案:

答案 0 :(得分:1)

我看不到jquery在代码中的任何地方都可以验证,因此假设这只是一个选择。当它们(在一个组中)全部具有相同的名称时,您可以使用HTML5的本机表单验证来使单选按钮成为必需。

这里是一个例子:

<form action="http://some.randompageonthe.net">  
  <p>  
    <label><input type="radio" name="r" value="a" required> A</label><br>
    <label><input type="radio" name="r" value="b" required> B</label><br>
    <label><input type="radio" name="r" value="c" required> C</label><br>   
  </p>
  <input type="submit">
</form>

JSFiddle Here

答案 1 :(得分:1)

几天前,我面临着同样的情况。 一个简单的解决方案是,您可以将其中一个单选按钮默认设置为“选中”。

 <label><input type="radio" name="r" value="a" checked> A</label><br>
 <label><input type="radio" name="r" value="b" > B</label><br>
 <label><input type="radio" name="r" value="c" > C</label><br>

此后,您将不需要进行验证。