Question

我有这个单选按钮，

 <form class="w3-container w3-card-4">
  <h2>Radio Buttons</h2>
  <p>
  <input class="w3-radio" type="radio" name="gender"  value="male" checked>
  <label >Male</label></p>
  <p>
  <input class="w3-radio" type="radio" name="gender"  value="female">
  <label >Female</label></p>
  <p>
  <input class="w3-radio" type="radio" name="gender" value="" disabled>
   <label>Don't know (Disabled)</label></p>
 </form>

问题是当我点击标签文本时，未选中单选按钮。有没有办法解决这个问题？

Answer 1

只需为单选按钮和标签框附近的关键字添加ID。

  <form class="w3-container w3-card-4">
   <h2>Radio Buttons</h2>
   <p>
   <input class="w3-radio" type="radio" name="gender" id="m1" value="male" checked>
   <label for="m1">Male</label></p>
   <p>
   <input class="w3-radio" type="radio" name="gender" id="m2" value="female">
   <label for="m2">Female</label></p>
   <p>
   <input class="w3-radio" type="radio" name="gender" value="" disabled>
   <label>Don't know (Disabled)</label></p>
 </form>

现在单击选中单选按钮的文本标签。

Answer 2

您的表单输入需要一个ID，您的标签需要引用它。

例如：

<input class="w3-radio" type="radio" name="gender"  value="male" checked id="gender-male">
<label for="gender-male">Male</label></p>

来自the spec

可以指定for属性以指示与标题相关联的表单控件。如果指定了该属性，则属性的值必须是与label元素在同一Document中的可标记元素的ID。如果指定了属性并且Document中有一个元素，其ID等于for属性的值，并且第一个这样的元素是一个可标记的元素，那么该元素就是标记为控件的标签元素。 / p>

Answer 3

您需要在label标签中包含输入。

＆＃13;

 <form class="w3-container w3-card-4">
  <h2>Radio Buttons</h2>
  <p>
  <label > <input class="w3-radio" type="radio" name="gender"  value="male" checked>
  Male</label></p>
  <p>
   <label ><input class="w3-radio" type="radio" name="gender"  value="female">
 Female</label></p>
  <p>
 <label> <input class="w3-radio" type="radio" name="gender" value="" >
   Don't know (Disabled)</label></p>
 </form>

＆＃13;

单击文本应单击HTML中的单选按钮

3 个答案: