javascript - jquery 如果选中复选框则添加值 true

Question

如果选中复选框，则状态值设置为“true”，如果未选中，则状态值设置为“false”，如何使 jquery 单击功能？

如果我选中复选框 1 ，则状态 1 设置为 true如果我选中复选框 2 ，则状态 2 设置为 true如果我选中复选框 3 ，则状态 3 设置为 true

<div class="form-group">    
  <label><input name="checkBox[]" type="checkbox" value="1"> Checkbox 1</label>
   <input name="status[]" type="text" value="">
</div>
<div class="form-group">    
   <label><input name="checkBox[]" type="checkbox" value="2"> Checkbox 2</label>
   <input name="status[]" type="text" value="">
</div>
<div class="form-group">    
  <label><input name="checkBox[]" type="checkbox" value="3"> Checkbox 3</label>
   <input name="status[]" type="text" value="">
</div>

Answer 1

因为您的输入在 <lable> 范围内，使用parent().next()设置值。

这是工作示例。

$(function() {
  $('.form-group input[type="checkbox"]').change(function() {
    if ($(this).is(":checked")) {
      $(this).parent().next().val('true')
    } else
      $(this).parent().next().val('false');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label><input name="checkBox[]" type="checkbox" value="1"> Checkbox 1</label>
  <input name="status[]" type="text" value="">
</div>
<div class="form-group">
  <label><input name="checkBox[]" type="checkbox" value="2"> Checkbox 2</label>
  <input name="status[]" type="text" value="">
</div>
<div class="form-group">
  <label><input name="checkBox[]" type="checkbox" value="3"> Checkbox 3</label>
  <input name="status[]" type="text" value="">
</div>