选中复选框之前隐藏div

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

trigger您的更改功能在页面加载时使用：

.trigger('change')

见下面的演示：

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);
  }).trigger('change'); // ADDED

  //  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);
    }
  }).trigger('change'); // ADDED
});

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

添加CSS以隐藏页面加载中的DIV，

.box{
   display:none;
 }

这是演示：https://jsfiddle.net/485c2uv0/

＆＃13;

＆＃13;

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

＆＃13;

.box{
   display:none;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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

隐藏使用Css： .box{ display:none }

见下面的工作代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是另一种解决方案。代码改进了。希望这会有所帮助。

jQuery(document).ready(function () {
    $('.divWrapper div.box').hide();

    //  Setze Startbedingung
    $('#all').prop('checked', false);

    //  Auswahl
    $('#checkform input:checkbox').change(function () {
        var _this = $(this), box = $('div.box[class*="' + _this.attr("data-tags") + '"]');
        switch (true) {
            case _this.is(':checked'):
                box.show('slow');
                break;

            default:
                box.hide('slow');

        }
    });
});

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

使用以下代码隐藏初始函数中的所有字段：

$('.box').hide();

Answer 6

试试这个：

.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
    label{ margin-right: 15px; }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Checkboxes</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <div>
        <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
        <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>

&