Question

我已经构建了一个表单，并且在单击单个复选框时尝试触发函数，但我正在使用的函数如下所示不起作用。基本上我能找到的与此问题相关的每个响应都指向我使用的相同方法，但我必须在这里做错事。

<form>
  <fieldset>
    <div class="row">
      <div class="col-sm-12">
        <div class="checkbox" id="check-3dAnimationVisualEffects">
          <input type="checkbox" id="filter-3dAnimationVisualEffects" name="3dAnimationVisualEffects" value="1" class="form-checkbox"/>
          <label for="filter-3dAnimationVisualEffects" data-toggle="tooltip" data-placement="top"><span>3D Animation Visual Effects</span></label>
        </div>
      </div>
    </div>
  </fieldset>
</form>

<script>
jQuery(document).ready(function($){ 
  if ($('#filter-3dAnimationVisualEffects').is(':checked')) {
    alert("Checked!");
  }
});
</script>

如果勾选复选框，如何才能运行此功能？

Answer 1

您应该使用.on()为点击事件附加事件处理函数，例如：

＆＃13;

jQuery(document).ready(function($){ 
  $('#filter-3dAnimationVisualEffects').on('click', function(){
    alert($(this).is(':checked'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <div class="row">
      <div class="col-sm-12">
        <div class="checkbox" id="check-3dAnimationVisualEffects">
          <input type="checkbox" id="filter-3dAnimationVisualEffects" name="3dAnimationVisualEffects" value="1" class="form-checkbox"/>
          <label for="filter-3dAnimationVisualEffects" data-toggle="tooltip" data-placement="top"><span>3D Animation Visual Effects</span></label>
        </div>
      </div>
    </div>
  </fieldset>
</form>

＆＃13;

Answer 2

你的表单和jQuery函数工作正常，但是你的代码逻辑实际工作方式存在误解：

if ($('#filter-3dAnimationVisualEffects').is(':checked')) {
    alert("Checked!");
}

只有在执行此jQuery函数之前已经选中了复选框时，此条件才有效。

如果您尝试检查然后取消选中它，它就无法按预期工作

当选中或取消选中复选框时，您应添加单击事件回调函数以执行操作：

$('#filter-3dAnimationVisualEffects').on('click', function(){
    if ( $(this).is(':checked') ) {
        alert("Checked!");
    } 
});

Answer 3

试试这个，你也可以在取消选中时触发事件。

＆＃13;

$(document).ready(function() {
  $('#filter-3dAnimationVisualEffects').on('change', function() {
    if ($(this).is(':checked'))
      alert('checked');
    else
      alert('not checked');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form>
  <fieldset>
    <div class="row">
      <div class="col-sm-12">
        <div class="checkbox" id="check-3dAnimationVisualEffects">
          <input type="checkbox" id="filter-3dAnimationVisualEffects" name="3dAnimationVisualEffects" value="1" class="form-checkbox" />
          <label for="filter-3dAnimationVisualEffects" data-toggle="tooltip" data-placement="top"><span>3D Animation Visual Effects</span></label>
        </div>
      </div>
    </div>
  </fieldset>
</form>

＆＃13;

无法在复选框检查时触发jquery功能

3 个答案: