jQuery onclick div checks a checkbox

Question

I have the following HTML code:

<div class="member">
    <input type="checkbox" value="64" style="display:none;" name="memberId[]" />
    <div class="memberInfo">John Doe</div>
</div>

I'm trying to get a jQuery script that when a visitor presses the member div it will change the background color, and check the memberId checkbox.

How should such a jQuery script look like?

Thanks,

lonesomeday · Accepted Answer · 2011-02-01 22:45:05Z

3

You should probably do this with toggle which allows you to set two handlers: one for the first time a handler is triggered and then one for the next time, repeating as necessary.

$('.member').toggle(function() { // first time
    $(this).css('background-color', '#ff0000')
           .find('input:checkbox').attr('checked', true);
}, function() { // second time
    $(this).css('background-color', '#ffffff')
           .find('input:checkbox').attr('checked', false);
});

answered Feb 1, 2011 at 22:45

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Or Weinberger Over a year ago

Although this should work as I see it works on jsfiddle, it doesn't work on my page for some reason. my member div is inside a jquery dialog, does that make any difference?

lonesomeday Over a year ago

@Or W It shouldn't matter. Could you post your actual code somewhere accessible?

Or Weinberger Over a year ago

Fixed it by wrapping your function with jQuery(document).ready(function (){

lonesomeday Over a year ago

@Or W Excellent -- I was taking that as read! Sorry for not being more explicit.

José Tomás Tocino · Accepted Answer · 2011-02-01 22:47:20Z

3

<script type="text/javascript">
    jQuery(document).ready(function (){
        $(".member").click(function() {
            $("input[name=memberId]").attr('checked', true);
            $(this).css('background-color','#F00');
        });

    });
</script>

Edit: The others were way faster than me :(

answered Feb 1, 2011 at 22:47

José Tomás Tocino

10.2k5 gold badges47 silver badges83 bronze badges

Comments

The Scrum Meister · Accepted Answer · 2011-02-01 22:41:52Z

0

$('.member').click(function(){
    $(this).css('background-color','#ABC098');
    $(this).find("input[type='checkbox']").attr('checked',true)
});

answered Feb 1, 2011 at 22:41

The Scrum Meister

30.2k8 gold badges69 silver badges65 bronze badges

1 Comment

Or Weinberger Over a year ago

Although this should work as I see it works on jsfiddle, it doesn't work on my page for some reason. my member div is inside a jquery dialog, does that make any difference?

Collectives™ on Stack Overflow

jQuery onclick div checks a checkbox

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related