如果选中单选按钮，则显示隐藏 div

Question

默认情况下，标题和横幅应隐藏，当用户选中单选按钮#show 时，标题和横幅容器将变为可见。如果选中任何其他单选按钮标题和横幅也隐藏。

<main>
    <div class="container">
        <form action="/" id="form">
            <input type="radio" id="radio-1">
            <input type="radio" id="radio-2">
            <input type="radio" id="show">
        </form>
    </div>
    <div class="container">Title</div>
    <div class="container">Banner</div>
    <div class="container">Some content</div>
</main>


      var itemHide = [0, 1];
      var $form = $('#form');
      
      if ($form.length > 0) {
        hideTeaser();
        radioAction();
      }
      
      function radioAction() {
        $form.click(function () {
          if ($('#show').is(':checked')) {
            showTeaser();
          } else {
            hideTeaser();
          }
        });
      }
  
      function hideTeaser() {
        $form.parent('.container').nextAll().filter( function(index, el) {
          return $.inArray(index, itemHide) > -1;
        }).hide();
      }
      
      function showTeaser() {
        $form.parent('.container').nextAll().filter( function(index, el) {
          return $.inArray(index, itemHide) > -1;
        }).show();
      }

Answer 1

看看这个

https://api.jquery.com/toggle/

jQuery 开关可简化您的操作。

Answer 2

试试这个。

        <main>
            <div class="container">
                <form action="/" id="form">
                    <input type="radio" name="content" value="radio1">
                    <input type="radio" name="content" value="radio2">
                    <input type="radio" name="content" value="show">
                </form>
            </div>
            <div class="container">Title</div>
            <div class="container">Banner</div>
            <div class="container">Some content</div>
        </main>
    
    
    
        $(document).ready(function() {

            $('div:contains("Title")').css('display','none');
            $('div:contains("Banner")').css('display','none');

            $("input[name$='content']").click(function() {
                var test = $(this).val();
                if(test == 'show'){
                   $('div:contains("Title")').show();
                   $('div:contains("Banner")').show();
                }
                else{
                   $('div:contains("Title")').hide();
                   $('div:contains("Banner")').hide();
                }
            });
        });

如果选中单选按钮，则显示隐藏 div

Show hide divs if radio button checked

jquery

show-hide

radio-button