Question

问题： 标签标签不能正常工作，单击Label并未取消选中单选按钮。这适用于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和HTML5 CR rules。您正在将label与两个元素相关联（一个通过for，一个通过嵌套），这是禁止的。所以代码不应该起作用。

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

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

让“标签”标签在Internet Explorer 6中工作（用于单选按钮）

2 个答案: