取消选中单选按钮和相关文本会消失吗?

时间:2012-03-08 15:51:18

标签: javascript forms radio-button

假设我有2组具有相同名称的3个单选按钮。我们将它们命名为“set1”和“set2”。

我想要做的是1:当用户按下我的CallFunction()按钮时,所有单选按钮将消失(或变得不可点击),2:只有未选择的选项文本(HTML中的收音机右侧)将消失,而用户选中的选项仍然可见。

请帮助,我开始认为没有一大堆getElementByIds这是不可能的......

...或者我应该放弃同一页面的想法,只使用提交?

1 个答案:

答案 0 :(得分:0)

这是怎么回事? http://jsfiddle.net/yyACY/

<强> HTML

<input type="button" id="butt" value="CallFunction()   :P" />
<div id="rads">
    <input type="radio" class="rad" name="set1" value="1" /><span class="set1">1</span><br />
    <input type="radio" class="rad" name="set1" value="2" /><span class="set1">2</span><br />
    <input type="radio" class="rad" name="set1" value="3" /><span class="set1">3</span><br /><br />
    <input type="radio" class="rad" name="set2" value="1" /><span class="set2">1</span><br />
    <input type="radio" class="rad" name="set2" value="2" /><span class="set2">2</span><br />
    <input type="radio" class="rad" name="set2" value="3" /><span class="set2">3</span><br /><br />
</div>

Javascript(Jquery)

$("#butt").click(function(){
    $("#rads").css('display', 'none');
});

$(".rad").click(function(){
    var spans = "." + $(this).attr("name");
    $(spans).css('display', 'none');
    $(this).next().css('display', '');
});