1

Ok so I have an element with radio buttons, and I clone this element when an add button is clicked; however, once I do so, the button on the initial element is unchecked. I know why this happens, but once I began to implement a work around it doesn't do as I expect.

Here was my solution:

    //This stores the value of the checked element into a variable before the clone
    var radioKeep = $('input.event'+(numOfParts-1)+':checked').val();

    //Cloned the element passed into the function
    $(element).parent().clone(true, false).insertAfter($(element).parent());

Then after the clone I try to make sure the initial radio button is re-checked with the following combination of jquery and xpath.

    $('input.event'+(numOfParts-1)+'[@value='+radioKeep+']').attr('checked', 'checked');

The result is that all radio elements are checked... why???

Thanks in advance.

6
  • I should probably mention that not all elements actually appear checked, only in the source code are they displayed checked="checked" the final radio button on the page however does remain visibly checked. Commented Jan 16, 2013 at 4:16
  • It's hard to say, can you console.log(radioKeep +' -- ' + numOfParts), do these values ever change? If not, then your selector will match every cloned element, and you also never clear the value, so the value will always match. Seems like this is most likely the issue. Can you get a jsFiddle up? Commented Jan 16, 2013 at 4:23
  • I alerted some values while trying to figure out the issue and everything makes sense the way I'm attempting to do it. So $('input.event'+(numOfParts-1) evaluates to $('input.event0') and radioKeep evaluates to the proper value. Commented Jan 16, 2013 at 4:28
  • Does the 0 eve change on successful clicks? Or is it 0 everytime? if so, then all elements will have that class everytime and that's 1/2 of my thoughts, now does the value of radioKeep ever change? Commented Jan 16, 2013 at 4:30
  • I have done a no no as far as incremental values for the classes, but it's what has been working for me so far. When I add an element it changes event0 to event1... event2 and so on. There are also more than one radio button per section and each have a different value; however, this shouldn't matter because I'm trying to access them via their class attribute. Commented Jan 16, 2013 at 4:34

1 Answer 1

1

When you clone the element, the new element has the same value and class as the old element, then you're setting the checked value of both of them, however only one can be checked so the last one receives checked. .first will fix that

$('input.event'+(numOfParts-1)+'[@value='+radioKeep+']').first().attr('checked', 'checked');

However, this still won't work if you are using jquery newer than 1.3.2 because xpath support was removed in 1.3.2, simply remove the @

$('input.event'+(numOfParts-1)+'[value='+radioKeep+']').attr('checked', 'checked');

Now we have a possible future proof problem, you're using .attr() to set a property, you really should be using .prop("checked", true) instead.

$('input.event'+(numOfParts-1)+'[value='+radioKeep+']').prop('checked', true);

If this doesn't solve your problem, I'd suggest posting sample html and a working function that we can test your code with. I made a lot of assumptions here due to the lack of the surrounding function and missing html.

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

1 Comment

Thanks, I didn't provide more code because no code was required, you answered my question nicely, thanks.

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.