检测复选框的默认 HTML 检查属性的问题答案

【问题标题】：Issue with detecting default HTML checked attribute for checkbox检测复选框的默认 HTML 检查属性的问题
【发布时间】：2011-05-04 01:12:44
【问题描述】：

我对 jQuery 有点陌生。我在使用以下代码时遇到问题，特别是重置按钮：

<script>
$(function() 
{
    $(document).ready(function()
    {
        $("input[type=checkbox][checked]").each(
        function()
        {
            var cell = $(this).closest('td');
            if($(this).attr('checked'))
            {
                cell.toggleClass('check');
            }
        });
    });
    $('#bay :checkbox').click(function() 
    {
        var cell = $(this).closest('td');
        cell.toggleClass('check');
    }).change();
    $('#reset').click(function()
    {   
    $('#bay input[type=checkbox]').each(function()
    {
        var cell = $(this).closest('td');
        if ($(this).is('checked'))
        {
        //alert("yes");
            cell.addClass('check');

        }
        else
        {
            cell.removeClass('check');
        //alert("no");

        }
        });
    });
});
</script>

<input type="checkbox" checked>Blah

由于某种原因，当单击重置按钮时，脚本仅执行 cell.addClass if 语句。基本上，重置按钮起到恢复的作用，如果 HTML 代码中没有默认属性，则应该从 each 中删除添加的类 #check。

我尝试了一种低效的方法来检查具有选中属性的输入复选框，而没有选中属性的方法在 FF 和 Chrome 中运行良好，但在 IE 中失败。只有按两次重置按钮才会起作用。

$('#reset').click(function()
{   

    $("input[type=checkbox][checked]").each(
    function()
    {
        var cell = $(this).closest('td');
        cell.addClass('check');
    });
    $("input[type=checkbox]:not([checked])").each(
    function()
    {
        var cell = $(this).closest('td');
        cell.removeClass('check');
    });
});

任何帮助将不胜感激！

编辑：根据请求，以下是带有工作（但效率低下）jQuery 代码 http://jsfiddle.net/uxjCT/9/ 的 HTML 代码示例。

Edit2:* 我已经稍微简化了代码的“重置”部分，但它仍然无法在 IE 中运行。任何人都知道这是否是一个无法解决的 IE 问题？本质上，对于在 HTML 中具有该属性的输入复选框以及样式表，我试图让重置功能重置为默认的 HTML“已检查”属性。 IE 是目前唯一令人痛苦的罪魁祸首。

$('#reset').click(function(){   

$('#bay input[type=checkbox]').each(function()
{
    var attr = $(this).is("[checked]");
    var cell = $(this).closest('td');

    if (typeof attr !== 'undefined' && attr !== false)
    {
        alert("checked");
        cell.addClass('check');
    }
    else
    {
        alert("unchecked");
        cell.removeClass('check');
    }
    });
});

由于某种原因，var attr = $(this).is("[checked]"); 不会选择 HTML 中的“checked”属性，但会在复选框已被选中时选择，这可能与默认的 HTML 属性不同。

再次感谢任何帮助！

演示代码：http://jsfiddle.net/uxjCT/55/

【问题讨论】：

能否请您发布一些 HTML 标记？

标签： jquery checkbox addclass checked removeclass

【解决方案1】：

检查复选框是否被选中的代码是

$(this).is(':checked')

不是

$(this).is('checked')

您的代码适用于此更改。

【讨论】：

【解决方案2】：

这应该可行。稍微修改一下代码

$('#reset').click(function(){   
    $('#bay input:checkbox').each(function()
    {
        var cell = $(this).closest('td');

        if (this.checked)
        {
            //alert("yes");
            cell.addClass('check');
        }
        else
        {
            cell.removeClass('check');
            //alert("no");

        }
    });
});

你可以试试working demo。

【讨论】：

这会将“check”类添加到新检查的输入中，但不会重置为具有默认 HTML“checked”属性的复选框。不过已经很近了。

【解决方案3】：

试试这个……

 $('#reset').click(function(){   

         cell.removeClass('check');//First remove class from all cell
        $('#bay :checked').each(function()
        {
                cell.addClass('check');//add class only to checked cells

        });
    });

【讨论】：

由于某种原因，当单击“重置”按钮时，此代码将所有内容设置为“检查”类。