得到"标签“;标签在Internet Explorer 6中工作(用于单选按钮）

Getting "Label" tags work in Internet Explorer 6 (for radio buttons)

本文关键字：标签 工作 用于 单选按钮 Internet quot 得到 Explorer      更新时间：2023-09-26

问题：标签标签无法正常工作，单击标签并没有取消选中单选按钮。这在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>

谢谢。。。

这里有一个非常简单的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/

实现这一点的简单方法是只使用一个JavaScript驱动的按钮来检查隐藏的单选按钮。用以下内容替换label元件：

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

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

请注意，您当前的代码违反了HTML规则，包括HTML4规则和HTML5CR规则。您将label与两个元素关联（一个通过for，一个通过嵌套），这是禁止的。因此，根本不应该期望代码工作。

最好的方法是将"无选择"选项设置为带有普通标签的普通单选按钮。这适用于所有浏览器，不需要JavaScript:

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