如何使用jQuery顯示/隱藏基於單選按鈕選擇的div？

我有一些單選按鈕，我想根據選擇哪個單選按鈕顯示不同的隱藏div。這裏的HTML是什麼樣子：如何使用jQuery顯示/隱藏基於單選按鈕選擇的div？

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" value="opt2">opt2</label></div> 
    <div><label><input type="radio" name="group1" value="opt3">opt3</label></div> 
    <input type="submit" value="Submit"> 
</form> 

.... 

<style type="text/css"> 
    .desc { display: none; } 
</style> 

.... 

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc">consectetur adipisicing</div> 
<div id="opt3" class="desc">sed do eiusmod tempor</div>

而且這裏是我的jQuery：

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() { 
     var test = $(this).val(); 
     $("#"+test).show(); 
    }); 
});

的原因我在做這樣的說法是因爲被動態生成的我的單選按鈕和申報單（價值單選按鈕將始終具有相應的div）。上面的代碼部分工作 - divs會顯示何時檢查正確的按鈕，但我需要添加一些代碼，以使div一旦隱藏按鈕被取消選中。謝謝！

來源

2010-05-05 M Thomas

有趣的問題.... – 2015-10-01 10:39:37

作爲@ STE-YEU提到的，請更正選擇在您的jQuery的:) – 2016-06-26 07:55:06

更新2015/06

在jQuery已經演變因爲這個問題被張貼，推薦的方法現在使用$.on

$(document).ready(function() { 
    $("input[name=group2]").on("change", function() { 

     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

或外部$.ready()

$(document).on("change", "input[name=group2]", function() { ... });

原創回答

您應該使用.change()事件處理程序：

$(document).ready(function(){ 
    $("input[name=group2]").change(function() { 
     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

應該工作

來源

2010-05-05 22:13:45 Zlatev

只是隱藏他們展示在他們面前：

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() { 
     var test = $(this).val(); 
     $("div.desc").hide(); 
     $("#"+test).show(); 
    }); 
});

來源

2010-05-05 22:14:20 albertein

謝謝「硫基」，這正是我需要的 – 2010-05-05 23:14:17

感謝名單的人這一個幫助我.... – 2015-10-01 10:39:17

對同一簡單的jQuery源 -

$("input:radio[name='group1']").click(function() {  
    $('.desc').hide(); 
    $('#' + $("input:radio[name='group1']:checked").val()).show(); 
});

爲了使它更合適一點只是增加檢查第一個選項 - 從造型

<div><label><input type="radio" name="group1" value="opt1" checked>opt1</label></div>

刪除.desc類，並修改類似的div -

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc" style="display: none;">consectetur adipisicing</div> 
<div id="opt3" class="desc" style="display: none;">sed do eiusmod tempor</div>

它真的會很好看任何─方法。

來源

2012-07-06 06:37:05 Bharat

這幫助了我，謝謝 – 2012-12-16 09:41:21

$(document).ready(function(){ 
    $("input[name=group1]").change(function() { 
     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

在這個例子中是正確的input[name=group1]。但是，感謝代碼！

來源

2012-12-14 15:31:34

<script type="text/javascript"> 
$(function() { 
    $("[name=toggler]").click(function(){ 
      $('.toHide').hide(); 
      $("#blk-"+$(this).val()).show('slow'); 
    }); 
}); 
</script> 
</head> 
<body> 
<label><input id="rdb1" type="radio" name="toggler" value="1" />Book</label> 
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label> 

<div id="blk-1" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name1:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 

</div> 
<div id="blk-2" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name2:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 
</div>

來源

2013-07-10 11:21:18

一個有趣的解決方案是讓此聲明：您剛纔給應顯示與它所依賴的複選框或單選按鈕的id屬性automaticallyVisibleIfIdChecked每格。也就是說，你的表格是這樣的：

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" id="rdio1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" id="rdio2" value="opt2">opt2</label></div> 
</form> 
.... 
<div id="opt1" automaticallyVisibleIfIdChecked="rdio1">lorem ipsum dolor</div> 
<div id="opt2" automaticallyVisibleIfIdChecked="rdio2">consectetur adipisicing</div>

，並有很好的使用函數式編程一些頁面的JavaScript無關：

function executeAutomaticVisibility(name) { 
    $("[name="+name+"]:checked").each(function() { 
     $("[automaticallyVisibleIfIdChecked=" + this.id+"]").show(); 
    }); 
    $("[name="+name+"]:not(:checked)").each(function() { 
     $("[automaticallyVisibleIfIdChecked=" + this.id+"]").hide(); 
    }); 
} 

$(document).ready(function() { 
    triggers = $("[automaticallyVisibleIfIdChecked]") 
     .map(function(){ return $("#" + $(this).attr("automaticallyVisibleIfIdChecked")).get() }) 
    $.unique(triggers); 
    triggers.each(function() { 
     executeAutomaticVisibility(this.name); 
     $(this).change(function(){ executeAutomaticVisibility(this.name); }); 
    }); 
});

相若方式

你可以自動與屬性automaticallyEnabledIfChecked啓用/禁用表單字段。

我覺得這個方法很好，因爲它避免了爲你的頁面創建特定的JavaScript - 你只需插入一些屬性來說明應該完成什麼。

來源

2014-08-07 18:40:07

如何使用jQuery顯示/隱藏基於單選按鈕選擇的div？

回答

相關問題