在单击 href 和单击复选框上选中复选框答案

【问题标题】：check checkbox on click href and on click checkbox在单击 href 和单击复选框上选中复选框
【发布时间】：2016-11-14 09:25:43
【问题描述】：

我知道有很多主题可以通过单击 href 来检查复选框，但在我看到的每个解决方案中，您无法通过单击复选框来检查复选框，因为它被 <a> 标记包裹。

这是我的html：

<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>

我的 Jquery：

    $("#cb").click(function(e) {
        e.preventDefault();
        $("#mode").prop("checked", !$("#mode").prop("checked"));
    })

我需要什么：

我需要能够通过单击 href 和单击复选框来选中复选框。

如果这篇文章是重复的，我很抱歉，但我没有看到它，把重复的链接给我，我会删除它。

JSFiddle

【问题讨论】：

为什么需要锚点内的复选框？
我在互联网上拿了一个菜单标签，每个菜单选项都有
你可以试试$("#mode").click(function(e){ e.stopPropagation(); });jsfiddle.net/fwzd08cw/3

标签： javascript jquery html checkbox

【解决方案1】：

在点击输入时检查目标的标签名称以防止 - https://jsfiddle.net/fwzd08cw/2/

$("#cb").click(function(e) {
    if((e.target).tagName == 'INPUT') return true; 
    e.preventDefault();
    $("#mode").prop("checked", !$("#mode").prop("checked"));
});

$("#cb").click(function(e) {
  if((e.target).tagName == 'INPUT') return true; 
  e.preventDefault();
  $("#mode").prop("checked", !$("#mode").prop("checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>

【讨论】：

【解决方案2】：

当您单击复选框时，您的代码有两个事件“单击”，父级触发它们的“单击”事件。
您需要使用event.stopPropagation() 函数来否定事件从子级到父级的传播。

$("#cb").click(function(e) {
  e.preventDefault();
  $('#mode').click(function(e) {
    e.stopPropagation();
  })
  $("#mode").prop("checked", !$("#mode").prop("checked"));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>

【讨论】：

每次点击#cb 时都会绑定一个click 事件。不要那样做

【解决方案3】：

试试这个，把你的输入标签放在锚点之外。

<a href='#' id='cb'> mode </a><input type='checkbox' id='mode'>

【讨论】：

【解决方案4】：

在输入中添加样式：

    pointer-events: none;

【讨论】：

不错的一个！但是，我们可能需要检查浏览器的兼容性！

【解决方案5】：

试试这个没有任何 JS 代码：

<a href='#' id='cb'><label>mode<input type='checkbox' id='mode'></label></a>

https://jsfiddle.net/fwzd08cw/5/

【讨论】：

【解决方案6】：

单击复选框时，“检查”会反转两次，

添加：$("#mode").click(function(e) { e.stopPropagation(); }); 以防止出现在链接内的这种副作用。

【讨论】：

【解决方案7】：

使用$('#cb, #mode') 选择两个元素
使用$(this).is('a')检查href是否是触发器，然后相应地选中或取消选中
在每种情况下都使用e.stopPropagation() 以避免在单击复选框时两次调用 click 9 一个用于输入，一个用于 href)

$('#cb, #mode').click(function (e) {
    if ($(this).is('a')) {
        e.preventDefault();
        $('#mode').prop('checked', !$('#mode').prop('checked'));
    }
    e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>

【讨论】：

【解决方案8】：

我不知道你为什么将 checkobx 放在链接中，但如果你想要一个解决方案，你可以但是将链接放在这样的范围内

<a href='#' id='cb'><span id="mohamed">mode</span><input type='checkbox' id='mode'></a>


$("#mohamed").click(function(e) {
        e.preventDefault();
        $("#mode").prop("checked", !$("#mode").prop("checked"));
    })

检查这支笔http://codepen.io/mohamed_sobhy292/pen/wWPzoo

【讨论】：