Question

我知道有很多主题可以通过点击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 AND来检查复选框。

如果这篇文章重复，我很抱歉，但我没有看到，请将副本链接到我，我将删除此内容。

JSFiddle

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

Answer 2

您的代码有两个事件＆＃39;点击＆＃39;当您单击复选框时，父级会触发“点击”按钮。事件。
您需要使用event.stopPropagation()函数来否定从子项到父项的事件传播。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

尝试此操作，将输入标记保留在锚点之外。

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

Answer 4

在输入上添加样式：

    pointer-events: none;

Answer 5

尝试使用不带任何JS代码：

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

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

Answer 6

＆＃39>检查＆＃39;单击复选框时，两次反转

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

Answer 7

使用$('#cb, #mode')选择两个元素
使用$(this).is('a')检查href是否为触发器，然后选中或取消选中
在每种情况下都要执行e.stopPropagation()以避免在单击复选框时同时单击一次9one表示输入，一个表示href）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

选中复选框，单击href，然后单击复选框

8 个答案: