Question

我有一个复选框，使用onclick处理程序设置样式。

我遇到的问题是，我也想同时触发一个div ..显示隐藏的信息。

有点像：复选框（勾选去推荐）

如果勾选显示精选div，则隐藏。

我的代码是：

<span id="checkboxWrap" class="styledCheckboxWrap"><input name="include" type="checkbox" id="checkbox" onclick="setCheckboxDisplay(this)" class="styledCheckbox" /></span>

想要像......那样解雇div：

onClick="toggle('feature');"

我可以将onClick事件链接到一个点击处理程序吗？

即..

onclick="setCheckboxDisplay(this);toggle('feature');"

或者我是围成一圈。

Answer 1

使用事件监听器。无论如何，他们还是更好。：）

var check = document.getElementById('checkbox');

check.addEventListener('click', function () {
    setCheckboxDisplay(this);
});

check.addEventListener('click', function () {
    toggle('feature');
});

Answer 2

理想情况下，您应该尝试开始使用unobstrusive javascript，这基本上意味着您可以通过在<script>标记内移动javascript或将其移到单独的文件中来将结构与功能分开。因此，您的代码看起来会像这样，并且更容易阅读。

HTML

<span id="checkboxWrap" class="styledCheckboxWrap">
  <input name="include" type="checkbox" id="checkbox" class="styledCheckbox" />
</span>

脚本

<script>
$(function(){
  $('.styledCheckbox').click(function(){
    setCheckboxDisplay(this);
    toggle('feature');
  });
});
</script>

Answer 3

是的，您可以在onclick属性中调用多个语句，只要它们以分号分隔即可。虽然这样会变得不合适，所以我通常会定义一个新函数来将这两个函数包装成一个调用。

Answer 4

将此委托给一个能完成所有工作的函数......

// Somewhere in the head of the file...
function doOnClickStuff(target) {
    toggle('feature');
    setCheckboxDisplay(target);
}

然后让onClick处理程序调用...

onClick="doOnClickStuff(target);"

需要添加另一个onClick事件

4 个答案: