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

Posted 2023-05-09

【中文标题】复选框检查时无法触发 jquery 功能

【英文标题】：Unable to trigger jquery function on checkbox check

【发布时间】：2017-11-09 05:54:06

【问题描述】：

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

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

当复选框被选中时，我怎样才能让这个函数运行？

【参考方案1】：

您应该使用.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>

【讨论】：

感谢斯坦尼斯拉夫！

【参考方案2】：

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

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

这个条件只有在你的复选框在执行这个 jQuery 函数之前已经被选中时才有效。

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

您应该添加一个点击事件回调函数来在选中或取消选中复选框时执行操作：

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

【参考方案3】：

试试这个，不勾选也可以触发事件。

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