单选按钮 jQuery

Question

我正在尝试显示一个 div，其中包含单选按钮选项 Yes 或 No 的输入字段。

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 检索元素的行为未指定。但是，大多数浏览器返回出现在 DOM 中的第一个元素，这就是事件处理程序仅绑定到 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();
    }
});

1. 你不需要检查“yes”上的 === - 它总是会在此处键入 check the yes 作为字符串
2. 第二个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 属性）。