在选中复选框之前隐藏 div答案

【问题标题】：Hide divs before checkbox is checked在选中复选框之前隐藏 div
【发布时间】：2017-10-01 21:40:54
【问题描述】：

我是编程新手，遇到了一个我无法解决的问题。基本上，我希望根据用户是否单击复选框来隐藏或显示 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>

【问题讨论】：

使用css - .box{display:none;} 示例： jsfiddle.net/cadjdsrm
完美运行！谢谢

标签： javascript jquery html jquery-selectors

【解决方案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>

【讨论】：

很高兴帮助你@marlen，如果你愿意，你能接受或投票吗！

【解决方案2】：

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>

【讨论】：

您可以在页面加载后看到内容切换，所以为什么不直接使用css 并将display 设置为none 用于class 名称为box 的所有元素
啊，很好的尝试 jQuery 解决方案，但如果你想坚持使用 jQuery 解决方案，可以在 DOM 就绪函数中用 .css() 替换 .trigger() 方法？ 示例： $(".box").css("display", "none");

【解决方案3】：

添加 CSS 以在页面加载时隐藏 DIV，

.box{
   display:none;
 }

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

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

.box{
   display:none;
 }

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

试试这个：

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });
});

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

【讨论】：