Question

我对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代码中没有默认属性，则应从每个按钮中删除添加的类#check。

我尝试了一种使用checked属性检查输入复选框的低效方法，还有一个没有，在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“checked”属性，对于在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中选中“已检查”属性，但如果选中了复选框，则会选中该属性，这可能与默认的HTML属性不同。

再次，任何帮助将不胜感激！

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

Answer 1

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

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

不

$(this).is('checked')

您的代码适用于此更改。

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

Answer 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

        });
    });

检查默认HTML已检查属性的复选框问题

3 个答案: