javascript - 在选中复选框之前隐藏 div

Question

我是编程新手，遇到了无法解决的问题。基本上我希望根据用户是否单击复选框来隐藏或显示 Div。该代码有效，但问题是单击复选框时我的所有 div 都隐藏而不是显示。我怎样才能解决这个问题？我希望它们在加载页面时不显示，仅在单击时显示。

        function checkSelect(el) {
            if ($('#all').prop('checked') == true) {
                $('#all').prop('checked', false);
                $(el).show();
            }
        }

        function showSelect(el) {
            checkSelect('.box');
            
			var val = $(el).data('tags');       
            $('div[class$="' + val + '"]').toggle('slow');
        }
        
        
        
        $(function () {
            //  Setze Startbedingung
            $('#all').prop('checked', false);
            
            //  Auswahl
            $('#checkform input').change(function () {
                showSelect(this);
            });
            
            //  Reset oder All
            $('#resetform input').change(function () {
                $('#checkform input').prop('checked', false);
                if ($(this).prop('checked') == true) {
                    $('.box').show('slow');
                }
                else {
                    // do nothing
                    $(this).prop('checked', false);
                }
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkform">
        <form>
            <h1>Worüber möchtest du von uns lesen?</h1>
            <fieldset>
                <ul>
                    <li>
                        <input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1">
                        <label for="checkbox1"><span>Sonne</span></label>
                    </li>
                    <li>
                        <input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2">
                        <label for="checkbox2"><span>Meer</span></label>
                    </li>
                    <li>
                        <input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3">
                        <label for="checkbox3"><span>Action</span></label>
                    </li>
                </ul>
            </fieldset>
        </form>
    </div>
    <div class="divWrapper">
        <div class="kolonne1">
            <div class="box sonne">
              
                    <p>sonne</p>

            </div>
            <div class="box meer">
                
                    <p>meer</p>
        
            </div>
            <div class="box action">

                    <p>action</p>

            </div>

Answer 1

您只需首先通过 jquery 或 css 隐藏所有 div。

使用 Jquery 隐藏: $('.box').hide();

使用CSS隐藏: .box{ display:none }

请参阅下面的工作代码:

function checkSelect(el) {
    if ($('#all').prop('checked') == true) {
        $('#all').prop('checked', false);
        $(el).show();
    }
}

function showSelect(el) {
    checkSelect('.box');
    var val = $(el).data('tags');       
    $('div[class$="' + val + '"]').toggle('slow');
}



$(function () {
    $('.box').hide();
    //  Setze Startbedingung
    $('#all').prop('checked', false);
    
    //  Auswahl
    $('#checkform input').change(function () {
        showSelect(this);
    });
    
    //  Reset oder All
    $('#resetform input').change(function () {
        $('#checkform input').prop('checked', false);
        if ($(this).prop('checked') == true) {
            $('.box').show('slow');
        }
        else {
            // do nothing
            $(this).prop('checked', false);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkform">
 <form>
  <h1>Worüber möchtest du von uns lesen?</h1>
  <fieldset>
   <ul>
    <li><input type="checkbox" name="Tags" value="Sonne" data-tags="sonne" id="checkbox1"> <label for="checkbox1"><span>Sonne</span></label>
    </li>
    <li><input type="checkbox" name="Tags" value="Meer" data-tags="meer" id="checkbox2"> <label for="checkbox2"><span>Meer</span></label></li>
    <li><input type="checkbox" name="Tags" value="Action" data-tags="action" id="checkbox3"> <label for="checkbox3"><span>Action</span></label>
    </li>
   </ul>
  </fieldset>
 </form>
</div>
<div class="divWrapper">
 <div class="kolonne1">
  <div class="box sonne">
   <p>sonne</p>
  </div>
  <div class="box meer">
   <p>meer</p>
  </div>
  <div class="box action">
   <p>action</p>
  </div>
 </div>
</div>