单击包含的
时如何切换复选框使用 JQuery？

发布于 2024-11-05 15:55:41 字数 782 浏览 0 评论 0原文

我有一些像这样的 html：

<ul class="myclass">
   <li><input type="checkbox"/>some text</li>
   <li><input type="checkbox"/>some text</li>
   <li><input type="checkbox"/>some text</li>
</ul>

我希望通过单击复选框或

的任何部分来切换复选框

我尝试了以下jquery：

 $('ul.myclass li').click(
                功能（） {
                    var cb = $(this).find(":checkbox")[0];

                    if (!$(cb).attr("已检查")) {
                        $(cb).attr("已检查", "已检查");
                    } 别的 {
                        $(cb).removeAttr("选中");
                    }
                }
         ）；

当我单击文本时效果很好。但是，现在复选框本身实际上不起作用。它似乎正在撤消单击复选框的行为。

如何防止这种情况发生？

原文

I have some html like:

<ul class="myclass">
   <li><input type="checkbox"/>some text</li>
   <li><input type="checkbox"/>some text</li>
   <li><input type="checkbox"/>some text</li>
</ul>

I want the checkboxes to be toggled either by clicking the checkboxes, or any part of the

I tried the following jquery:

        $('ul.myclass li').click(
                function() {
                    var cb = $(this).find(":checkbox")[0];

                    if (!$(cb).attr("checked")) {
                        $(cb).attr("checked", "checked");
                    } else {
                        $(cb).removeAttr("checked");
                    }
                }
         );

Which works fine for when I click the text. But, now the checkboxes themselves dont actually work. It appears to be undoing the act of clicking on the checkbox.

How do I prevent this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南汐寒笙箫 2024-11-12 15:55:41

您可以通过添加以下内容来修复它：

$('ul.myclass li input').click(
    function(event){
        event.stopPropagation();
    });

基本上，问题是当您单击复选框时，它会被选中，但随后父 li 的单击事件会触发取消选中它。上面的代码阻止 li 的事件触发。

You can fix it by adding this:

$('ul.myclass li input').click(
    function(event){
        event.stopPropagation();
    });

basically the problem is that when you click on the checkbox, it is checked, but then the parent li's click event fires unchecking it. The code above prevents the li's event from firing.

回复收藏 0 原文

苏佲洛 2024-11-12 15:55:41

他是我的版本，使用 jQuery 1.6 中的新 .prop api

http://jsfiddle.net/7w82S/1/

回复收藏 0 原文

晨光如昨 2024-11-12 15:55:41

您还可以使用此代码

$('ul.myclass li').click(function(){
  $('input', this).attr('checked',true);
});

单击 li 元素时，会选择子输入元素，并将其检查值设置为 true。

您可以通过检查已检查属性的值来检查和取消检查。

$('ul.myclass li').click(function(){
    var myInput = $('input', this)
    if(myInput.attr('checked')){
       myInput.attr('checked', false);
    }
    else{
       myInput.attr('checked', true);
    }
});

you could also use this code

$('ul.myclass li').click(function(){
  $('input', this).attr('checked',true);
});

On clicking the li element the child input element is selected and it's checked value is set to true.

You can check and uncheck by checking the value of the checked attribute.

$('ul.myclass li').click(function(){
    var myInput = $('input', this)
    if(myInput.attr('checked')){
       myInput.attr('checked', false);
    }
    else{
       myInput.attr('checked', true);
    }
});

回复收藏 0 原文

~没有更多了~