jquery$find(":checkbox").each(遍历的时候怎么去判断是不是被选中

Posted 2023-05-09

参考技术A $("input:checkbox:checked") 这个直接就可以 找到所有选中的checkbox 如果你要循环的话 楼下正解

jquery 简单的一B 参考技术B $(":checkbox").each(function()
if ($(this).is(':checked'))

else



); 参考技术C jQuery(":check").each(function()
if(jQuery(this).prop("checked") == true)...
else...
)

使用 jQuery 单击切换

【中文标题】使用 jQuery 单击切换

【英文标题】：Click toggle with jQuery

【发布时间】：2010-11-30 20:01:11

【问题描述】：

我使用了悬停功能，您可以在鼠标悬停时执行 x 以及在鼠标悬停时执行 y 和鼠标悬停。我正在尝试相同的点击，但它似乎不起作用：

$('.offer').click(function() 
  $(this).find(':checkbox').attr('checked', true ); 
,function()
  $(this).find(':checkbox').attr('checked', false ); 
);

我希望在单击 div 时选中复选框，如果再次单击则取消选中 - 单击切换。

【问题讨论】：

这里是How to create JQuery plugin to convert radio buttons into toggle buttons 和Here you can see demo 的教程。希望它可以帮助您或其他用户

【参考方案1】：

这很容易通过在每次点击时翻转复选框的当前“选中”状态来完成。例子：

 $(".offer").on("click", function ()  
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 );

或：

 $(".offer").on("click", function ()  
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 );

或者，通过直接操作 DOM 'checked' 属性（即不使用attr() 来获取被点击复选框的当前状态）：

 $(".offer").on("click", function ()  
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 );

...等等。

注意：从 jQuery 1.6 开始，复选框应该使用prop 而不是attr：

 $(".offer").on("click", function ()  
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 );

【讨论】：

我不建议将元素的 DOM 属性设置为布尔值。大概它在这个过程中被转换为字符串'1'。

@Alex Barrett - 没关系，jQuery 将这些细节扫到了地毯下。我相信使用 attr() 将 selected、disabled 和 checked 等布尔属性设置为布尔值是一种常见的做法。此外，它们的内部表示是布尔值，无论是否使用字符串或布尔值设置，alert($foo.attr('checked')) 都会返回 true 或 false。

我遇到过一些情况，您实际上需要完全删除“已选中”属性才能取消选中该框。在这种情况下，这些都不起作用。

@Jeremy - 你能提供一个可行的例子吗？听起来像是一个奇怪的边缘案例。

当您只需单击每个复选框时，为什么要以如此复杂的方式反转属性：... $(this).find(':checkbox').click(); ...

【参考方案2】：

另一种方法是像这样扩展 jquery：

$.fn.toggleCheckbox = function() 
    this.attr('checked', !this.attr('checked'));

然后调用：

$('.offer').find(':checkbox').toggleCheckbox();

【讨论】：

我喜欢这样，因为它也适用于大量复选框。 +1

你应该添加this.trigger('change');否则不会触发onChange事件。

【参考方案3】：

警告：使用 attr() 或 prop() 更改复选框的状态 不会 触发 change 事件 在我测试过的大多数浏览器中。检查状态会改变，但没有事件冒泡。您必须在设置选中属性后手动触发更改事件。我有一些其他事件处理程序监视复选框的状态，它们可以在用户直接点击时正常工作。但是，以编程方式设置检查状态无法始终触发更改事件。

jQuery 1.6

$('.offer').bind('click', function() 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
);

【讨论】：

也可以直接触发点击事件。

【参考方案4】：

您可以使用toggle 函数：

$('.offer').toggle(function() 
    $(this).find(':checkbox').attr('checked', true);
, function() 
    $(this).find(':checkbox').attr('checked', false);
);

【讨论】：

这已被弃用。

【参考方案5】：

为什么不在一行？

$('.offer').click(function()
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
);

【参考方案6】：

我有一个名为 chkDueDate 的复选框和一个带有点击事件的 HTML 对象，如下所示：

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

单击 HTML 对象（在本例中为 <span>）切换复选框的选中属性。

【参考方案7】：

jQuery：最好的方法，将操作委托给 jQuery (jQuery = jQuery)。

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) 
    return !val;
);

【参考方案8】：

尝试改变这个：

$(this).find(':checkbox').attr('checked', true ); 

到这里：

$(this).find(':checkbox').attr('checked', 'checked'); 

不是 100% 确定是否会这样做，但我似乎记得遇到过类似的问题。祝你好运！

【参考方案9】：

$('.offer').click(function() 
    if ($(this).find(':checkbox').is(':checked'))
    
        $(this).find(':checkbox').attr('checked', false); 
    else
        $(this).find(':checkbox').attr('checked', true); 
    
);

【参考方案10】：

在 JQuery 中，我认为 click() 不接受两个用于切换的函数。您应该为此使用 toggle() 函数：http://docs.jquery.com/Events/toggle

【参考方案11】：

$('.offer').click(function()  
    $(':checkbox', this).each(function() 
        this.checked = !this.checked;
    );
);

【参考方案12】：

最简单的解决方案

$('.offer').click(function()
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
);

【讨论】：

关闭。第一次单击时它将是“未定义”，分配值“假”。然后它将在第二次单击时定义，分配值“true”。在第三次单击时，它仍将被定义，因此仍将分配为“true”。

【参考方案13】：

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

【参考方案14】：

切换复选框值的另一种替代解决方案：

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function()

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

);

【参考方案15】：

    $('controlCheckBox').click(function()
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
);