顯示和隱藏動態DIV

單擊單選按鈕時如何顯示和隱藏下面的DIV？顯示和隱藏動態DIV

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" id=radio1_1" name="radio_1" value="1">Yes</label> 
    <label><input type="radio" id=radio1_2" name="radio_1" value="2">Yes</label> 
    </div> 

    <div id="yes_wrap_1" style="display:none">test1</div> 
    <div id="no_wrap_1" style="display:none">test2</div> 

    <div><label><input type="radio" id=radio2_1" name="radio_2" value="1">Yes</label> 
    <label><input type="radio" id=radio2_2" name="radio_2" value="2">Yes</label> 
    </div> 

    <div id="yes_wrap_2" style="display:none">test1</div> 
    <div id="no_wrap_2" style="display:none">test2</div> 

    --------------- 


     ---------- 
    <input type="submit" value="Submit"> 
</form>

這裏我硬編碼的第一個單選按鈕點擊，並試圖隱藏和顯示的DIV的第一集團。但我有相同的結構動態生成10個單選按鈕組和10個DIV組。我想使用相同的功能來處理其他單選按鈕組。你可以讓我知道如何做到這一點？謝謝。

$(document).ready(function(){ 
    $("input[name$='radio_1']").click(function() { 
     if ($(this).val() === '1') 
     {  
      $("#yes_wrap_1").show(); 
      $("#no_wrap_1").hide(); 
     } 
     else if ($(this).val() === '2') 
     {  
      $("#yes_wrap_1").hide(); 
      $("#no_wrap_1").show(); 
     } 
    }); 
});

來源

2011-11-18 nav100

你怎麼樣添加一個類的收音機，喜歡說，「開關」，和你這樣做：

$("input.switch").click(function() { 
     var value = $(this).attr('id').substring(7); 
     $("#yes_wrap_" + value).show(); 
     $("#no_wrap_" + value).hide(); 
});

來源

2011-11-18 15:16:09

我alreday有一個class =「required」的單選按鈕。我怎樣才能使用上面的邏輯？ – nav100

你有沒有得到它的工作，或者你需要進一步的幫助？ –

這將工作

變化

$("input[name$='radio_1']").click(function() {

至

$("input[type='radio']").click(function() {

Jsfiddle鏈接，參考

來源

2011-11-18 15:16:15 Wazzzy

+1感謝您：+1 ....請標記它是否有幫助.... – Wazzzy

如果標記是動態生成的，你可以不只是使用onclick和做類似

<div><label><input type="radio" id=radio1_1" name="radio_1" value="1" onclick="$('#yes_wrap_1').show();$('#no_wrap_1').hide();">Yes</label> 
<label><input type="radio" id=radio1_2" name="radio_1" value="2" onclick="$('#yes_wrap_1').hide();$('#no_wrap_1').show();">Yes</label> 
</div>

來源

2011-11-18 15:17:10 Danny

你的選擇不會選擇所有的單選按鈕。嘗試像這樣

$("input:radio").click(function(){ 
});

來源

2011-11-18 15:18:38 ShankarSangoli

顯示和隱藏動態DIV

回答

相關問題