jQuery的切換DIV基於單選按鈕選擇

Question

我有一個單選按鈕組的調查形式，其HTML看起來像：

<label>Would you like to compete?</label> 
     <input type="radio" name="compete" value="2" id="competenoradio" > 
     <label for="compete_no">No</label> 
     <input type="radio" name="compete" value="1" id="competeyesradio"> 
     <label for="compete_yes">Yes</label> 
     <div id="competeyes"> 
     <label class="competeyestxt" hidden=true>Which Location?</label> 
     <textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt" hidden="true"> 
     </textarea> 
     </div> 

The div at the bottom with id 'competeyes' need to be toggled between invisible to visible 
based on whether the user selected radio button with id 'compete_yes'. 

這是我在它的企圖，這是行不通的。

Attempt 1: 
$('#competeyesradio').bind('change',function(){ 
    $('#competeyes').toggle($(this).is(':checked')); 
}); 


Attempt 2: 

$('div.input input:radio').bind('change',function(){ 
    $('#competeyes').toggle($(this).is(':checked')); 
}); 

Attempt 3: 

$('[name=compete]').bind('change',function(){ 
    $('#competeyes').toggle($(this).is(':checked')); 
}); 

有什麼建議嗎？

Answer 1

您的第一個問題是您正在使用$(this).is(':checked')來檢查是否檢查當前元素。它永遠是真的。

$('input[name="compete"]').bind('change',function(){ 
    var showOrHide = ($(this).val() == 1) ? true : false; 
    $('#competeyes').toggle(showOrHide); 
}); 

你的第二個問題是你使用的是hidden="true"的字段。你應該使用CSS來隱藏字段。下面是HTML標記，你應該使用：

<label>Would you like to compete?</label> 

<input type="radio" name="compete" value="2" id="competenoradio" > 
<label for="compete_no">No</label> 

<input type="radio" name="compete" value="1" id="competeyesradio"> 
<label for="compete_yes">Yes</label> 

<div id="competeyes" style="display:none"> 
    <label class="competeyestxt">Which Location?</label> 
    <textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt"></textarea> 
</div> 

Here is a demo

Answer 2

$("#competenoradio[checked]")( 
    function() { 
     $('#competeyes').toggle(); 
    } 
); 

Answer 3

$('input[id=competeyesradio]:checked')(function(){ $('#competeyes').toggle(); 

}

Answer 4

你爲什麼要驗證它，當撥動只是工作？它最多可以爲您提供回電。你應該試試這個：

$('#competeyes').toggle();

Answer 5

你可以做這樣的事情是什麼發現here

$('input:radio').bind('change',function(){ 
    $('#competeyes').toggle($(this).attr('id') == 'competeyesradio'); 
}); 

Answer 6

你可以試試this one，雖然不是免費的解決方案。

披露：我是開發人員。