如何使用名称和类型验证 html 中的单选按钮

Posted 2023-03-05

【中文标题】如何使用名称和类型验证 html 中的单选按钮

【英文标题】：How to validate radio button in html using name and type

【发布时间】：2012-03-06 16:34:40

【问题描述】：

我有三组单选按钮，并使用以下代码获取单选按钮的选中值。但这会将所有单选按钮作为一个单独的组，如何使用其组名进行分隔和验证。

 $(document).ready(function () 
        $("#submit").click(function () 
         var x = $("input[type=radio]:checked").val();
    );
   );



<label><input type="radio" name="present" value="1" />yes</label>
<label><input type="radio" name="present" value="2" />no</label>
<label><input type="radio" name="present" value="3" />No idea</label>

<label><input type="radio" name="outing" value="1" />yes</label>
<label><input type="radio" name="outing" value="2" />no</label>
<label><input type="radio" name="outing" value="3" />No idea</label>

<label><input type="radio" name="member" value="1" />yes</label>
<label><input type="radio" name="member" value="2" />no</label>
<label><input type="radio" name="member" value="3" />No idea</label>

【参考方案1】：

对于present 组应该是var x = $("input[type=radio][name='present']:checked").val();（修改name 即兴发挥）。

【参考方案2】：

你可以这样做

$(document).ready(function () 
        $("#submit").click(function () 
         var x = $("input[type='radio'][name='present']:checked").val();
         var y = $("input[type='radio'][name='outing']:checked").val();
         var z = $("input[type='radio'][name='member']:checked").val();
    );
   );

x,y,z 有各自选中的单选按钮值