如何为input type=checkbox配置onclick实现勾选切换及条件跳转

首先需要调整原有的onclick绑定逻辑，不能将跳转路径写死在标签属性中，需将判断逻辑移入onOff函数内，同时传入当前点击的checkbox实例，修改后的标签代码如下：

<input type="checkbox" onclick="onOff(this);return false;" class="filter">

onOff() 内部实现逻辑 #

• 第一步切换勾选状态：接收传入的checkbox DOM对象，反转它的checked属性值，实现勾选/未勾选状态的切换
• 第二步状态判断跳转：根据切换后的checked值执行对应跳转：
  • 切换后为勾选状态：跳转至带goto参数的地址
  • 切换后为未勾选状态：跳转至无参数的index.php

完整代码实现 #

function onOff(checkbox) {
  // 手动切换勾选状态，因为return false会阻止浏览器默认的勾选切换行为
  checkbox.checked = !checkbox.checked;
  // 根据状态执行跳转
  if (checkbox.checked) {
    document.location.href = 'index.php?goto=somewhere';
  } else {
    document.location.href = 'index.php';
  }
}

注意事项 #

原写法将跳转逻辑直接写在onclick属性中，会导致无论勾选状态如何都会触发带参数的跳转，不符合需求，因此必须将跳转逻辑移入函数内做状态判断。

内容的提问来源于stack exchange，提问作者Natalya GNS