Question

我目前正在尝试使整个Bootstrap输入组能够被单击，以便在单击输入组的任何部分时都将选中该复选框，并且在选择输入组时也应该能够取消选中该复选框单击输入组。我现在正在使用的当前代码是：

$(document).ready(function(){
  $('.input-group,#opt_in').click(function(){
    if ($('#opt_in').is(':checked')) {
      $('#opt_in').prop('checked', false);
    }
    else{
      $('#opt_in').prop('checked', true);
    }
  });

});

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" name="opt_in" id="opt_in" value="true">
      <label class="form-check-label">I CONFIRM</label>
    </div>
  </div>
  <p class="form-control" aria-label="Text input with checkbox" id="consent">that all of my info is accurate and consent to be called as provided above</p>
</div>

但是由于某种原因，我不知道，它不起作用。有什么原因吗？我在这里使用jQuery，但也可以使用普通javascript。我只是不确定我的代码在哪里乱跑！

Answer 1

$(document).ready(function(){
  $('.input-group,#opt_in').click(function(){
    if ($('#opt_in').is(':checked')) {
      $('#opt_in').prop('checked', false);
    }
    else{
      $('#opt_in').prop('checked', true);
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" name="opt_in" id="opt_in" value="true">
      <label class="form-check-label">I CONFIRM</label>
    </div>
  </div>
  <p class="form-control" aria-label="Text input with checkbox" id="consent">that all of my info is accurate and consent to be called as provided above</p>
</div>

输入组字段检查整个输入组上的单击处理程序

1 个答案: