当有多个复选框时，如何使用jquery在div中显示数据？

Question

当复选框被选中时，我尝试使用jquery显示数据。我要获取单个复选框的数据，但我需要为每个复选框显示不同的数据。下面是html和jquery的代码

​

​

有没有人可以帮我创建一个函数，该函数可以捕获其他复选框的is，以便在选中复选框时显示数据？

​

$(document).ready(function() {
  $('#checkbox31').change(function() {
    if (this.checked)
      $('#autoUpdate').fadeIn('slow');
    else
      $('#autoUpdate').fadeOut('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="filled-in" id="checkbox31">
<label for="checkbox31" class="justify-content" style="font-weight:bold; font-size: 0.9rem;">DISCONNECT/PO CANCEL REASONS</label>
<div class="float-left">
  <textarea name="Text1" cols="40" rows="4"></textarea>
</div>
<input type="checkbox" class="filled-in" id="checkbox3">
<label for="checkbox3" class="justify-content" style="font-weight:bold; font-size: 0.9rem;">REP USED REASON</label>

<div class="float-left">
  <textarea name="Text1" cols="40" rows="4"></textarea>
</div>
<input type="checkbox" class="filled-in" id="checkbox3" onclick="myFunction()">
<label for="checkbox3" class="justify-content" style="font-weight:bold; font-size: 0.9rem;">CUSTOMER OBJECTION</label>

<div class="float-left">
  <textarea name="Text1" cols="40" rows="4"></textarea>
</div>



<div id="autoUpdate" style="display:none">
  <input type="checkbox" class="filled-in" id="checkbox301">
  <label for="checkbox301" class="label-table"></label> &nbsp;&nbsp;&nbsp;&nbsp;
  <label for="input15" class="col-sm-9 col-form-label pt-2">Promotion discontinued</label>
  <br />
  <input type="checkbox" class="filled-in" id="checkbox301">
  <label for="checkbox301" class="label-table"></label> &nbsp;&nbsp;&nbsp;&nbsp;
  <label for="input15" class="col-sm-9 col-form-label pt-2">Abonded service</label>
  <br />
</div>

<div id="Reason2" style="display:none">
  <label for="input15" class="col-sm-9 col-form-label pt-2">Reason l</label>
  <label for="input15" class="col-sm-9 col-form-label pt-2">Reason 2</label>
  <label for="input15" class="col-sm-9 col-form-label pt-2">Reason 3</label>
</div>

​

Answer 1

使用类和数据属性：

<input type="checkbox" class="filled-in" id="checkbox31" data-div="autoUpdate"> 

然后你可以这样做

$(".filled-in").on("change",function() { 
  var $div = $("#"+this.getAttribute("data-div")); 
  if (this.checked) $div.fadeIn(); else $div.fadeOut(); 
});