使用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刪除單選按鈕

回答

相關問題