文章/答案/技术大牛

发布

社区首页 >问答首页 >无法在复选框上触发jquery函数

问无法在复选框上触发jquery函数
EN

Stack Overflow用户

提问于 2017-06-07 18:19:26

回答 3查看 57关注 0票数 3

我已经构建了一个表单，并试图在单击单数复选框时触发一个函数，但是我所使用的函数(如下面所示)无法工作。基本上，我所能找到的与这个问题相关的每一个反应都指向我所用的方法，正如我所能知道的那样，但我在这里肯定做错了什么。

<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>

当选中复选框时，如何使此函数运行？

jquery

html

forms

checkbox

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-06-07 18:23:13

应该使用.on()为单击事件附加事件处理程序函数，如下所示：

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

<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>

票数 1

Stack Overflow用户

发布于 2017-06-07 18:35:54

您的表单和jQuery函数工作良好，但在代码逻辑实际工作方式上存在误解：

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

只有在执行此jQuery函数之前已选中复选框时，此条件才能工作。

如果您尝试检查，然后取消检查，它将不能像您预期的那样工作。

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

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

票数 1

Stack Overflow用户

发布于 2017-06-07 18:38:16

尝试此操作，也可以在未选中时触发事件。

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

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44420086

复制

相似问题

问无法在复选框上触发jquery函数
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在复选框上触发jquery函数EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在复选框上触发jquery函数
EN