如果选中复选框，则显示 div答案

【问题标题】：if checkbox cheked go to shown div如果选中复选框，则显示 div
【发布时间】：2017-12-14 07:42:25
【问题描述】：

我有 5 个复选框和 5 个 div。如果选中复选框，则 div 为 .show，否则 div 为隐藏。复选框具有固定位置，滚动部分是打开的 div。我需要添加功能 if checkbox is checked->show div and go to div

$('#first').click(function() {
  if ($(this).is(':checked')) {

    $("#fifth").show(400);
  } else {
    $("#fifth").hide(400);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

      <input id="first" type="checkbox" class="styled" checked>
      <label for="checkboxhovuz">
      On check you g to 5-th div
      </label>


<div class="row" >
   <br><br><br><br><br><br>text first<br><br><br>
</div>
<div class="row">
   <br><br><br><br><br><br>text second<br><br><br>
</div>
<div class="row">
   <br><br><br><br><br><br>text third<br><br><br>
</div>
<div class="row">
   <br><br><br><br><br><br>text fourth<br><br><br>
</div>
<div class="row" id="fifth">
   <br><br><br><br><br><br>text fifth<br><br><br>
</div>

【问题讨论】：

I need to add function if checkbox is checked->show div and go to div 为什么你不这样做？是什么阻碍了你？ stackoverflow.com/help/how-to-ask
如果你正在寻找一种滚动到特定元素的方法，你应该看看这个：stackoverflow.com/questions/6677035/jquery-scroll-to-element
Scroll / Jump to id without jQuery的可能重复

标签： javascript jquery css checkbox

【解决方案1】：

当条件语句的计算结果为true 时，考虑使用.animate() 方法滚动到相关元素，例如：

$('html, body').animate({
        scrollTop: $("#fifth").offset().top
    }, 2000);

代码片段演示：

$('#first').click(function() {

  if ($(this).is(':checked')) {
  
    $("#fifth").show(400);
    
    $('html, body').animate({
        scrollTop: $("#fifth").offset().top
    }, 2000);
    
  } else {
  
    $("#fifth").hide(400);
    
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

    <input id="first" type="checkbox" class="styled" checked>
    <label for="checkboxhovuz">
      On check you g to 5-th div
      </label>


    <div class="row">
      <br><br><br><br><br><br>text first<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text second<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text third<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text fourth<br><br><br>
    </div>
    <div class="row" id="fifth">
      <br><br><br><br><br><br>text fifth<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text sixth<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text seventh<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text eigth<br><br><br>
    </div>

【讨论】：

很好的解决方案，我的解决方案应该是类似的！ +1
$('#first').on('change', function() { }) 会更好吗？
@VilleKoo 谢谢你的问题，这是一个很好的问题。据我了解，.on() 通常是比.click() 更好的使用方法，因为它提供了附加事件处理程序所需的所有功能。 change 事件类型仅限于 <input> 元素、<textarea> 框和 <select> 元素，并在其值更改时发送到元素。

【解决方案2】：

试试这个

$(document).ready(function() {
  if ($('#first').is(':checked')) {
    $("#fifth").show(400);
  } else {
    $("#fifth").hide(400);
  }
});

【讨论】：

【解决方案3】：

我必须添加document.getElementById('tulantisular').scrollIntoView();

所以总代码是，取自 Scroll / Jump to id without jQuery

$('#first').click(function() {
  if ($(this).is(':checked')) {
    $("#fifth").show();
    document.getElementById('fifth').scrollIntoView();
  } else {
    $("#fifth").hide();
  }
});

【讨论】：