使用 jQuery 删除单选按钮答案

【问题标题】：Removing a radio button with jQuery使用 jQuery 删除单选按钮
【发布时间】：2012-06-14 05:37:36
【问题描述】：

表单上有一组或多组单选按钮。该值可以从 ^ 的值开始。一旦选择了另一个值，^ 就不再可行，因此需要隐藏它的 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>

【问题讨论】：

你介意在 jsfiddle.net 上发布这个吗？
这和你上一个问题不一样吗？ (stackoverflow.com/questions/11005071/…)
您的 HTML 无效，您的元素有多个重复的 id，id 属性应该始终是唯一的。除此之外，请清楚您的要求，这很难理解，我很乐意为您提供帮助，干杯！
Html Validator: (validator.w3.org/#validate_by_input) 不要得到意想不到的结果然后责怪浏览器不工作，首先确保你的 Html 是有效的。

标签： jquery asp.net html html-select

【解决方案1】：

你的代码有各种损坏：

没有隐含的$this变量
没有.id()函数
当您可以使用 if 语句时，您不需要过滤使用 id 选择器选择的 jquery 对象
正如其他人指出的那样，DOM id 必须是唯一的，所以如果我在代码中留下了那个 id 选择器，它会在 2/3 的时间里选择不正确的元素。
当前元素为this时，无需在事件处理程序中重新选择当前元素
nitpick：前缀变量是带有 $ 的 jquery 对象以提高可读性

编辑：我的代码很烂，我只给你留下 cmets

【讨论】：

"一旦选择了另一个值，^ 就不再可行，所以它的 div 需要隐藏。" - 因为您不理解问题，因此无法回答。
我认为当您选择 ^ 以外的选项时，OP 要求删除 ^。不是当你重新选择^。
啊，好电话。会解决的，但我认为编写好的代码可能比隐藏正确的 dom 元素更有利于他。
现在它正在删除您单击的other 选项，而不是^。删除 ^ 而不是 $(this) 的兄弟
@mkoryak：您的代码并不糟糕。老实说，我认为原始代码中的 Html 非常混乱，在它可靠运行之前需要解决很多问题。

【解决方案2】：

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

但是，当任何其他同级发生更改时，以下内容不使用按 id 选择，并且将隐藏组中的 last <input> 值 = ^：

$('.tristateRadio').bind('change', function() {
    $(this).parent().siblings(':last').hide();
});

问题中的原始代码不起作用，因为 $this 未定义。我想您可能是指 $(this) 以便将本机对象包装在 jQuery 中。这类错误通常显示在浏览器的控制台或对话框中，是调试 JavaScript 时首先要查看的地方。

【讨论】：

那是完美的，我并没有意识到 ^ 真的总是最后一个，确实如此。谢谢！

【解决方案3】：

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

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

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

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

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

【讨论】：