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