Changing radio button values and adding classes with jquery

Question

I'm trying to user jquery to add/remove a class on a pair of divs which consist of a background images. The div/image is meant to act as a radio box for a pair of hidden radio boxes.

When clicking the div/image the script should apply the class 'selected' to the clicked div and remove it (if necessary) from the other; and select the appropriate hidden radio button.

To the best of my knowledge the below script should work, but isn't and I'm not really sure what I'm doing incorrectly right now. Any ideas stackers?

SCRIPT

$("div#like").click(function() {
    var $radios = $('input:radio[name=vote]');
    $("div#dislike").removeClass("selected");
    $("div#like").addClass("selected");
        $radios.filter('[value=likes]').attr('checked', true);
});

$("div#dislike").click(function() {
    var $radios = $('input:radio[name=vote]');
    $("div#like").removeClass("selected");
    $("div#dislike").addClass("selected");
        $radios.filter('[value=likes]').attr('checked', true);
});

HTML

<form action="createComment.php" method="post">
<div id="like" ><input class="like" type="radio" name="vote" value="likes" /></div>&nbsp;
<div id="dislike" ><input class="dislike" type="radio" name="vote" value="dislikes" /></div><br/>
</form>

[EDIT 3:07PM] What if I went this route?

$("div#like").click(function() {
    var $radios = $('input:radio[name=vote]');
        $("div#dislike").removeClass("selected");
        $("div#like").addClass("selected");
        $radios.filter('[value=likes]').attr('checked', true);
        $radios.filter('[value=dislikes]').attr('checked', false);
    });

$("div#dislike").click(function() {
    var $radios = $('input:radio[name=vote]');
        $("div#like").removeClass("selected");
        $("div#dislike").addClass("selected");
        $radios.filter('[value=dislikes]').attr('checked', true);
        $radios.filter('[value=likes]').attr('checked', false);
    });

Does it work for you now? You've corrected which button you set to checked, so it appears to me it should. Actually, it won't work - you should leave the attr("checked", true) in there. — kinakuta
– kinakuta, Commented Jun 18, 2011 at 19:13
See the jquery docs for setting checked: docs.jquery.com/… — kinakuta
– kinakuta, Commented Jun 18, 2011 at 19:20
It works on its own, but when I integrate it into my site it still doesn't. — VikingGoat
– VikingGoat, Commented Jun 18, 2011 at 19:34
What happens? Additionally, setting the other button to false is unnecessary - the browser will automatically handle that for you when another button gets checked. — kinakuta
– kinakuta, Commented Jun 18, 2011 at 19:43
From what I'm seeing, the radio buttons are not being set to true when the div is clicked (have made them visible to test). — VikingGoat
– VikingGoat, Commented Jun 18, 2011 at 20:01

Mridul Kashatria · Accepted Answer · 2011-06-18 18:48:56Z

1

Don't set the attribute checked="checked" using javascript. Instead, use

radioButton.checked = true

Using jquery you can do,

$radios.filter('[value=likes]').get(0).checked = true

Here is a nice little example for you, http://jsfiddle.net/cu2y8/6/

edited Jun 18, 2011 at 18:48

answered Jun 18, 2011 at 18:39

Mridul Kashatria

4,1972 gold badges21 silver badges15 bronze badges

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

1 Comment

Mridul Kashatria Over a year ago

Actually, setting the checked attribute using javascript will not update it. You need to set the checked property of the radio element to make this work.

kinakuta · Accepted Answer · 2011-06-18 18:45:15Z

0

You set checked to true on the [value=likes] button regardless of which div gets clicked.

Make sure you select the [value=dislikes] button when the dislike div is clicked.

edited Jun 18, 2011 at 18:45

answered Jun 18, 2011 at 18:39

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

Collectives™ on Stack Overflow

Changing radio button values and adding classes with jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related