Làm thế nào để sử dụng jQuery để hiển thị/ẩn div dựa trên lựa chọn nút radio?

Tôi có một số nút radio và tôi muốn có các div ẩn khác nhau hiển thị dựa trên nút radio nào được chọn. Đây là những gì HTML trông giống như:Làm thế nào để sử dụng jQuery để hiển thị/ẩn div dựa trên lựa chọn nút radio?

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

Và đây là jQuery tôi:

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

Lý do tôi đang làm nó như vậy là vì các nút radio và divs của tôi đang được tạo ra tự động (giá trị của nút radio sẽ luôn có một div tương ứng). Đoạn mã trên hoạt động một phần - các div sẽ hiển thị khi nút đúng được chọn, nhưng tôi cần phải thêm vào một số mã để làm cho các div ẩn lại sau khi nút được bỏ chọn. Cảm ơn!

Nguồn

2010-05-05 M Thomas

Câu hỏi hay .... –

Như @ ste-yeu đã đề cập, hãy sửa bộ chọn thành 'group1' trong jQuery của bạn :) –

Cập nhật 2015/06

Như jQuery đã phát triển kể từ khi câu hỏi đã được đăng, cách tiếp cận đề nghị hiện nay đang sử dụng $.on

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

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

hoặc bên ngoài $.ready()

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

gốc answer

Bạn nên sử dụng .change() xử lý sự kiện:

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

nên làm việc

Nguồn

2010-05-05 22:13:45 Zlatev

Chỉ cần giấu chúng trước khi cho họ thấy:

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

Nguồn

2010-05-05 22:14:20 albertein

cảm ơn, đó là chính xác những gì tôi cần –

Thanx Người đàn ông này đã giúp tôi ... –

Nguồn jquery đơn giản cho cùng -

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

Để làm cho nó ít thích hợp hơn chỉ cần thêm kiểm tra đầu tiên lựa chọn -

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

lớp remove .desc từ phong cách và sửa đổi các div như -

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

nó sẽ thực sự nhìn mở bất kỳ tốt cách.

Nguồn

2012-07-06 06:37:05 Bharat

điều này đã giúp tôi, cảm ơn –

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

Chính xác input[name=group1] trong ví dụ này. Tuy nhiên, cảm ơn mã!

Nguồn

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>

Nguồn

2013-07-10 11:21:18

Một giải pháp thú vị là làm cho tường thuật này: bạn chỉ cần cung cấp cho mỗi div mà sẽ được hiển thị một thuộc tính automaticallyVisibleIfIdChecked với id của nút checkbox hay radio mà nó phụ thuộc.Đó là, hình thức của bạn trông như thế này:

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

và có một số trang JavaScript độc lập mà độc đáo sử dụng lập trình chức năng:

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); }); 
    }); 
});

Tương tự bạn có thể tự động kích hoạt/vô hiệu hóa các lĩnh vực hình thức với một thuộc tính automaticallyEnabledIfChecked.

Tôi nghĩ rằng phương pháp này là tốt đẹp vì nó tránh phải tạo JavaScript cụ thể cho trang của bạn - bạn chỉ cần chèn một số thuộc tính cho biết nên làm gì.

Nguồn

2014-08-07 18:40:07

Làm thế nào để sử dụng jQuery để hiển thị/ẩn div dựa trên lựa chọn nút radio?

Trả lời

Các vấn đề liên quan