logo标签列表

点击 href 时选中复选框和点击复选框。

javascriptjqueryhtmlcheckbox
5

我知道有很多关于通过单击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

3
为什么需要在锚点内放置复选框？ - Adam Azad
我在互联网上找到了一个菜单选项卡，每个菜单选项都有<a>标签。 - Jax Teller
你可以尝试使用 $("#mode").click(function(e){ e.stopPropagation(); }); https://jsfiddle.net/fwzd08cw/3/ - Adam Azad
8个回答
4

在点击输入框时，检查目标标签的名称以防止误操作 - 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

当您单击复选框时，您的代码具有两个'click'事件，父级触发它们的'click'事件。
您需要使用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 事件。不要这样做。 - Adam Azad
2
在输入框上添加样式：
    pointer-events: none;
不错！但是，我们可能需要检查浏览器兼容性！ - Navaneeth
1
尝试一下，将您的输入标签放在锚点外面。
<a href='#' id='cb'> mode </a><input type='checkbox' id='mode'>
0

当单击复选框时，“checking”会被反转两次。

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

0
使用$('#cb, #mode')选择这两个元素。 使用$(this).is('a')检查是否是href触发的，然后相应地选中或取消选中。 在任何情况下都要使用e.stopPropagation()来避免在单击复选框时调用两次click（一次为input，一次为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>

0
0

我不知道为什么你把复选框放在链接里面，但如果你想要一个解决方案，你可以把链接放在一个 span 里面，像这样

<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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接