Question

表单上有一组或多组单选按钮。值可能以^的值开始。一旦选择了另一个值，^就不再可行了，所以需要隐藏div。这是源和html，以及jsfiddle中的链接：http://jsfiddle.net/RSNxS/

$(function(){

    $('.tristateRadio').bind("change", handleTristateRadioChange);

    function handleTristateRadioChange(e) {
        var button = $this;
        var id = button.id();

        $("#"+id).filter(
            function(){ this.value == "^"}
        ).parent().hide();
    }
});

HTML

$<div class="questionItem">
    <h3>C0900A</h3>
Staff asmt mental status: recall current season <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900B</h3>
Staff asmt mental status: recall location of room <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900C</h3>
Staff asmt mental status: recall staff names/faces <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900D</h3>
Staff asmt mental status: recall in nursing home <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900Z</h3>
Staff asmt mental status: none of above recalled <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

Answer 1

你的代码是各种破碎的：

没有隐含的$this变量
没有.id()功能
当你可以使用if语句时，你不需要过滤使用id选择器选择的jquery对象
正如其他人指出的那样，DOM ID必须是唯一的，所以如果我离开你的代码中的id选择器，它会选择2/3的错误元素。
当前元素为this
nitpick：前缀变量是jquery对象，$是为了便于阅读

编辑：我的代码糟透了，我只留下评论

Answer 2

它不起作用，因为页面上只能有一个id。 jQuery假设这样，并且只会选择一个单选按钮，因此永远不会找到值为'^'的任何单词。

只需将其更改为一个类就可以使用（或者使用其他类型的标识 - 如name）

$("."+theClass).filter(
    function(){ this.value == "^"}
).parent().hide();

您也可以选择使用CSS选择器：

$("."+theClass+"[value='^']").parent().hide();

Answer 3

你绝对应该修复多个id问题，这是无效的HTML并且可能导致意外和意外的行为（正如其他人已经提到的那样）。

但是，以下内容不会使用ID进行选择，并且当任何其他同级更改时，会隐藏组中值<{1}}的最后 <input>：

问题中的原始代码无效，因为$('.tristateRadio').bind('change', function() { $(this).parent().siblings(':last').hide(); });未定义。我认为您可能需要$this才能将本机对象包装在jQuery中。这些错误通常显示在浏览器的控制台或对话框中，是调试JavaScript时首先要查看的内容。

使用jQuery删除单选按钮

3 个答案: