使用jQuery删除单选按钮

表单上有一组或多组单选按钮。该值可能以^的值开始。一旦选择了另一个值，^不再可行，因此div需要隐藏。这里是源和HTML，用的jsfiddle链接到它一起：http://jsfiddle.net/RSNxS/使用jQuery删除单选按钮

$(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>

来源

2012-06-13 Sam Carleton

你介意在jsfiddle.net上发帖吗？ – hafichuk

这和你最后一个问题不一样吗？（http://stackoverflow.com/questions/11005071/removing-a-option-from-dropdownlist-item-with-jquery） – Nope

您的HTML无效，您有多个重复的id元素，id属性应始终是唯一的。除此之外，请清楚你的问题，很难理解，我很乐意帮助你，欢呼！ –

你应该明确解决多个id问题，这是无效的HTML，并可能导致不希望的和意外的行为（如其他人已经提到）。

然而以下不按id使用的选择和将隐藏最后<input>与值= ^的基团中，当任何其它的兄弟姐妹的改变：

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

在原代码问题不起作用，因为$this未定义。我想你可能意思是$(this)为了包装本地对象在jQuery中。这些错误通常显示在浏览器的控制台或对话框中，并且是调试JavaScript时首先要看的地方。

来源

2012-06-13 21:29:16 andyb

这是完美的，它并没有黎明在我身上，^真的总是最后一个，它是。谢谢！ –

它不工作，因为只能有一个id一个页面上。 jQuery假设这一点，并且只会选择你的单选按钮之一，因此从未找到任何值为'^'的值。

只需将其更改为一类，它会工作（或使用一些其他类型的标识 - 就像name）

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

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

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

来源

2012-06-13 21:20:36 ahren

您代码是各种破：

没有暗示$this变量
没有.id()功能
你不需要过滤器的ID选择器选择一个jQuery对象，当你if语句可以只使用一个
为别人指出的那样，DOM ID必须是唯一的，所以有我留下你的代码中的id选择器，它会选择2/3的错误元素。
没有必要重新选择当前元素在事件处理程序时，当前元素是this
挑剔：前缀变量与$的jQuery对象的可读性

编辑：我的代码很烂，我留给你的只是评论

来源

2012-06-13 21:23:25 mkoryak

“一旦选择了另一个值，^不再可行，因此它需要被隐藏。” - 因为你不明白这个问题，所以无法回答。 – ahren

我认为当您选择^以外的选项时，OP会要求删除^。不是当你重新选择^时。 – Nope

啊好电话。将会修复，但我认为编写好的代码可能会让他更加受益，然后隐藏正确的dom元素。 – mkoryak

使用jQuery删除单选按钮

回答

相关问题