在Internet Explorer 6中获取“标签”标签（对于单选按钮）

Question

问题： 标签标签不能正常工作，点击标签并未取消选中单选按钮。 这适用于Mozilla Firefox，但我无法在Internet Explorer 6中使用它。是否有JavaScript/jquery解决方法。

<p>Would you prefer to walk without effort?</p> 
<input type="radio" value="a" name="radgrp2"/> Yes <br /> 
<input type="radio" value="b" name="radgrp2"/> No <br /> 
<input type="radio" value="c" name="radgrp2"id="rad[1]" style="display:none;"/> 
<label for="rad[1]"><input type ="button"value="Clear"/></label> 

谢谢...

Answer 1

这里是一个非常简单的jQuery修复隐藏是一个标签标记的任何儿童的投入：

 <p>Would you prefer to walk without effort?</p> 
     <input type="radio" value="a" name="radgrp2"/> Yes <br /> 
     <input type="radio" value="b" name="radgrp2"/> No <br /> 
     <input type="radio" value="c" name="radgrp2" id="rad[1]" style="display:none;"/> 
     <label for="rad[1]"><input type="button"value="Clear"/></label> 

     <script> 
      $("label>input").hide(); 
     </script> 

这里试试：http://jsfiddle.net/VA3EH/1/

这通过在元素上调用show（）也很容易反转。

这里是这样做一个漂亮的，动态的方式：

 <p>Would you prefer to walk without effort?</p> 
     <input type="radio" value="a" name="radgrp2"/> Yes <br /> 
     <input type="radio" value="b" name="radgrp2"/> No <br /> 
     <input type="radio" value="c" name="radgrp2" id="rad[1]" style="display:none;"/> 
     <label for="rad[1]"><input type="button"value="Clear"/></label> 

     <script> 
      $("label>input").hide(); 
      $("input[type='radio']").click(function() { 
       $(this).nextAll("label").find("input").show(); 
      }) 
     </script> 

按钮被隐藏，单选按钮直到点击。一旦单选按钮，然后清除按钮显示。试试看：http://jsfiddle.net/25z3h/

然后，如果你真的想获得幻想，另附事件处理程序的按钮，以清除该复选框值，并再次隐藏自身：

 <p>Would you prefer to walk without effort?</p> 
     <input type="radio" value="a" name="radgrp2"/> Yes <br /> 
     <input type="radio" value="b" name="radgrp2"/> No <br /> 
     <input type="radio" value="c" name="radgrp2" id="rad[1]" style="display:none;"/> 
     <label for="rad[1]"><input type="button"value="Clear"/></label> 

     <script> 
      $("label>input").hide(); 
      $("input[type='radio']").click(function() { 
       $(this).nextAll("label").find("input").show(); 
       $(this).nextAll("label").find("input").click(function() { 
        $(this).parent("label").prevAll("input[type='radio']").removeAttr("checked"); 
        $(this).hide(); 
       }) 
      }) 
     </script> 

这里试试：http://jsfiddle.net/VA3EH/2/

Answer 2

执行此操作的简单方法是仅使用JavaScript驱动的按钮来检查隐藏的单选按钮。将label元素替换为以下内容：

<input type="button" value="Clear" onclick= 
"document.getElementById('rad[1]').checked = true" /> 

缺点是，禁用JavaScript时这不起作用。对于不引人注意的JavaScript，您应该使用JavaScript生成此input元素。

请注意，您当前的代码违反了HTML规则，这两个规则均为HTML 4 rule s和HTML5 CR rules。您正将label与两个元素（一个通过for，一个通过嵌套）关联，这是禁止的。所以代码不应该被期望工作。

最好的方法是使“无选择”选项成为具有普通标签的普通单选按钮。这适用于所有浏览器，并且不需要JavaScript：

<input type="radio" value="c" name="radgrp2" id="rad[1]" /> 
<label for="rad[1]">No preference</label>