Question

我正在尝试使用单选按钮选项的输入字段Yes或No来显示div。

HTML

<input id='companyreg' name='companyreg' class='radio' type='radio' value='yes' /> Yes
<input id='companyreg' name='companyreg' class='radio' type='radio' value='no' /> No

Jquery

var compfieldset = $("#companyfieldset");
//if javascript hide comp field
compfieldset.hide();
$("#companyreg").click(function(){
    var value = $("input[@name=companyreg]:checked").val();
    if (value === "yes") {
        compfieldset.slideDown();
    }
    if (value != "yes") {
        compfieldset.slideUp();
    }
});

请你帮帮我。

修改

对不起。

当我点击否时，没有任何反应。

如果我点击是，则字段集显示。

Answer 1

同一个文档中不能有两个具有相同ID的元素。您的选择器#companyreg正在查找第一个元素而不是第二个元素。如果你要查看

$("#companyreg").length

你会看到1。

你可以通过

来解决这个问题

$( '[id="companyreg"]' )

虽然它无法修复您的无效文档。最好的方法是删除ID并为这些元素添加一个类，然后通过该类选择。

我没有检查你的其余代码，看看这是否是唯一的问题，但我怀疑它是最大的问题。

Answer 2

ID必须是唯一的。请改用类：

<input class='companyreg radio' name='companyreg' type='radio' value='yes' /> Yes
<input class='companyreg radio' name='companyreg' type='radio' value='no' /> No

并且事件处理程序可以简化为：

$(".companyreg").click(function(){
    if (this.value === "yes") {
        compfieldset.slideDown();
    }
    else {
        compfieldset.slideUp();
    }
});

事件处理程序中不需要:selected选择器。与复选框不同，单击的单选按钮所选按钮。

或者，您可以放弃class和id并使用属性选择器：

$('input[name=companyreg]')

您还可以考虑使用.delegate()来使用事件委派。不需要将相同的事件处理程序绑定到两个元素。

为什么它不适用于多个ID？

ID必须是唯一的，如果ID具有相同的ID，则不会指定按ID检索元素的行为。但是，大多数浏览器都会返回出现在DOM中的 first 元素，这就是事件处理程序仅绑定到yes单选按钮的原因。

Answer 3

你的问题不够具体，无法知道问题所在，但我可以指出一些问题：

var compfieldset = $("#companyfieldset");
//if javascript hide comp field
compfieldset.hide();
$("#companyreg").click(function(){
    var value = $("input[@name=companyregyes]:checked").val();
    if (value == "yes") {
        compfieldset.slideDown();
    } else {
        compfieldset.slideUp();
    }
});

您不需要在“是”上检查=== - 它总是会在此处键入“是”作为字符串检查
如果只有两个状态，是和否，则不需要第二个if。

另外，你有类似......

<div id="companyfieldset">
 <input id='companyregyes' name='companyreg' class='radio' type='radio' value='yes' /> Yes
 <input id='companyregno' name='companyreg' class='radio' type='radio' value='no' /> No
</div>

所有ID属性都必须是唯一的，如（参见上面的id属性）。

Radio Buttons jQuery

3 个答案: