up vote 1 down vote favorite

I'm a bit new to jQuery. I'm having issues with the following code working, specifically the reset button:

<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

For some reason when the reset button is clicked, the script executes only the cell.addClass if statement. Basically, the reset button acts as a restore, and should remove the added class #check from each , if there is no default attribute in the HTML code.

I tried an inefficient method of doing a check of input checkboxes with a checked attribute, and one without, which ran fine in FF and Chrome, but failed in IE. It would only work if you hit the reset button twice.

$('#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');
    });
});

Any help would be very appreciated!

Edit: Per request, the following is a sample of the HTML code w/the working (but INEFFICIENT) jQuery code http://jsfiddle.net/uxjCT/9/.

Edit2:* I've simplified the "reset" portion of the code a bit, but it still will not work in IE. Anyone know if this is specifically an IE issue that can't be resolved? Essentially, I'm trying to get the reset function to reset to the defaulted HTML "checked" attribute, for the input checkboxes that have the attribute in the HTML, along with the stylesheet. IE is the only culprit that is a pain right now.

$('#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');
    }
    });
});

For some reason the var attr = $(this).is("[checked]"); won't pick up the "checked" attribute in the HTML, but will pick up if the checkbox has been checked, which may be different than the defaulted HTML attribute.

Again, any help would be appreciated!

Demo'd code: http://jsfiddle.net/uxjCT/55/

share|improve this question
Could you please post some HTML markup? – rahul May 3 '11 at 5:58
feedback

3 Answers

up vote 1 down vote

This should work. Modifying your code a bit

$('#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");

        }
    });
});

You can try out a working demo.

share|improve this answer
This adds the class "check" to the inputs that were newly checked, but does not reset to checkboxes that had a defaulted HTML "checked" attribute. It's close though. – Jay Hobbes May 3 '11 at 13:16
feedback
up vote 2 down vote

The code to check if a checkbox is checked is

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

not

$(this).is('checked')

Your code works with this change.

share|improve this answer
feedback
up vote 1 down vote

try this... 

 $('#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

        });
    });
share|improve this answer
For some reason this code set everything as the class "check" when the "Reset" button was clicked. – Jay Hobbes May 3 '11 at 13:14
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.