0

Without giving loads of unnecessary details (details upon request) I'm changing which radio button is selected through the following code, let's say when a button called "reset radio" is clicked the following code gets executed:

$("input:radio[name=resetName][value=resetValue]").attr("checked", true);

Let's also say:

var resetName = radiobuttons;
var resetValue = radioButton1;
var resetID = radioButton1;

I execute some more code when one of the radio buttons is selected, and I'm listening to the event through .change() handler.

However, the following scenario jams things up.
1. click on radioButton3
2. reset the selected value to radioButton1 through the handy "reset" button
3. click on radioButton3 again

What happens here is that the radio button resets on the screen, but since I'm using an .change event handler, somehow jquery still thinks that radioButton3 is selected, so it doesn't see a change. I can only get radioButton3 selected by clicking on a different radio button first, then clicking on radioButton3. How do I fix this so that jquery sees the value changing as well as on screen?

Fiddle: http://jsfiddle.net/h255E/5/

Improve this question
6
  • You should trigger the change event yourself. Commented Jun 16, 2014 at 21:23
  • Can you setup a jsFiddle with a minimum example that replicates your issue? Commented Jun 16, 2014 at 21:23
  • Add a Jsfiddle...and I'll take a look. I'm not sure I can assemble the problem from what you given here. Commented Jun 16, 2014 at 21:24
  • 1
    Also jQuery consideres checked to be a property not an attribute so best practice suggests using .prop('checked', true); Commented Jun 16, 2014 at 21:24
  • stackoverflow.com/questions/16892382/… Commented Jun 16, 2014 at 21:29

4 Answers 4

Reset to default
0

You have to take into consideration what you are using with the name and value selector

If resetName and resetValue are variables, which I believe is what you need, you would need to select it like so :

$("input:radio[name='" + resetName + "'][value='" + resetValue + "']").attr("checked", true);

However, if your HTML looks like this : 

<input type="radio" name="resetName" value="resetValue"/>

Then your selector needs to be this :

$("input:radio[name='resetName'][value='resetValue']").attr("checked", true);
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yes, resetName and resetValue are variables. Tried your suggestion, but it's the same situation.
@user2755541 have you checked what resetName and resetValue are before passing it to this to make sure they are what you think they are?
@user2755541 before this line put console.log("Reset Name : " + resetName); console.log("Reset Value : " + resetValue); and see if it is giving you the correct value. Because the selector should work.
0

try unchecking all the radios first:

$("input:type['radio']").prop("checked", false);

and then check the one that you want:

$("input:radio[name="+resetName+"][value="+resetValue+"]").prop("checked", true);
Improve this answer

1 Comment

Tried it, but no luck.
0

You need to remove checked from all radio inputs, before 'resetting'

function resetValues(resetID, resetName, resetValue) {
    $(".padder input[type='radio']").each(function(){
        $(this).attr("checked",false);
    });
    $("input:radio[name='" + resetName + "][value='" + resetValue + "']").attr("checked", true); //select first radio option in list
    $('#' + resetID).parent().siblings().css("border", "1px solid transparent");
    $('#' + resetID).parent().css("border", "1px solid #ccc");
}
Improve this answer

2 Comments

I think that solves the problem, however it makes every option unselected instead of just the default one.
When making the fiddle, I figured out the problem. Just change the line that used to say '$("input:radio[name=resetName]...' to '$('#' + resetID).prop("checked", true);'
-2

It is not attr, it is prop

$("input:radio[name=resetName][value=resetValue]").prop("checked", true);

On click of the reset button trigger the .change() on the radio buttons.

Improve this answer

2 Comments

That yields the same result. Good thought though!
Also, i have updated, use the .change() to trigger change on click of reset button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.