Modifying html attributes with jQuery producing unexpected results

Question

I am experiencing some unusual results with my jQuery and was hoping that somebody could enlighten me as to why. I am sure that jQuery is powerful enough to do this, so I wonder what I am doing wrong. Here is what I have (some seemingly simple and easy to understand code):

///////////reset default search entries/////////////
$("#sOrderByDLM").attr('checked', 'checked');
$("#sOrderByID").attr('checked', '');
$("#sOrderByPOIName").attr('checked', '');
$("#sOrderByAge").attr('checked', '');
$("#sOrderByOfficer").attr('checked', '');

$("#sOrderByDesc").attr('checked', 'checked');
$("#sOrderByAsc").attr('checked', '');

I have this inside a simple javaScript function that is called on the click of a non-submit type (normal) button. The problem is that when I click this, instead of it filling the sOrderByDLM radio button, it actually fills the sOrderByOfficer button and likewise with the bottom two jQuery statements (e.g., sOrderByAsc becomes 'checked' instead of sOrderByDesc) Am I not blatantly telling jQuery to reset the 'checked' attribute to that of the second argument, which is blank, except in the cases where I specifically set it to 'checked' for the fields I intend to be default?

I experienced a similar problem with checkboxes, but I found a work around by simply calling the same statements in reverse order, but that doesn't seem to work here, though. If I set 'checked="checked"' in razor everything is fine, but I need this button to work on the client side.

Anyway, if the HTML is necessary, I will provide it, but I doubt it is needed since the I have triple checked the ids to be sure.

Thanks for any help!

(And God Bless Stack Overflow, I don't know what I would do without you! :D)

UPDATE:

                    <tr>
                        <td class="orderlineupColor"><label for="sOrderByDLM">Date Last Modified</label><br/><input type="radio" id="sOrderByDLM" name="sOrderBy" style="margin-left: 115px;" value="OrderByDLM" @OrderByFiller[0] /></td>
                        <td class="orderlineupColor"><label for="sOrderByID">Entry ID</label><br/><input type="radio" id="sOrderByID" name="sOrderBy" style="margin-left: 115px;" value="OrderByID" @OrderByFiller[1] /></td>
                        <td class="orderlineupColor"><label for="sOrderByPOIName">POI Name</label><br/><input type="radio" id="sOrderByPOIName" name="sOrderBy" style="margin-left: 115px;" value="OrderByPOIName" @OrderByFiller[2] /></td>
                        <td class="orderlineupColor"><label for="sOrderByAge">Age</label><br/><input type="radio" id="sOrderByAge" name="sOrderBy" style="margin-left: 115px;" value="OrderByAge" @OrderByFiller[3] /></td>
                        <td class="orderlineupColor"><label for="sOrderByOfficer">Officer</label><br/><input type="radio" id="sOrderByOfficer" name="sOrderBy" style="margin-left: 115px;" value="OrderByOfficer" @OrderByFiller[4] /></td>
                    </tr>
                    <tr>
                        <td class="orderlineupColor2">In Descending Or<br/>Ascending Order:</td>
                        <td class="orderlineupColor2"><label for="sOrderByDesc">Descending Order</label><br/><input type="radio" id="sOrderByDesc" name="sAscOrDesc" style="margin-left: 115px;" value="OrderByDesc" @OrderByAscOrDescFiller[0] /></td>
                        <td class="orderlineupColor2"><label for="sOrderByAsc">Ascending Order</label><br/><input type="radio" id="sOrderByAsc" name="sAscOrDesc" style="margin-left: 115px;" value="OrderByAsc" @OrderByAscOrDescFiller[1] /></td>
                        <td class="orderlineupColor2"><button type="button" class="smallbtn" onclick="clearSortEntries()">Reset Sort Entries</button></td>
                        <td class="orderlineupColor2"></td>
                    </tr>

You're answer did, work, I have one button that clears that set of fields alone, and another that clears the whole form, and I was clicking the former while modifying code for the latter, my apologies. I have accepted and upvoted your answer, thank you! — VoidKing
– VoidKing, Commented Oct 9, 2012 at 21:09

Sushanth -- · Accepted Answer · 2012-10-09 20:50:25Z

3

Try using bools and .prop()

$("#sOrderByDLM").prop('checked', true); // To check

$("#sOrderByID").prop('checked', false); // To Uncheck

answered Oct 9, 2012 at 20:50

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

Comments

Diodeus - James MacFarlane · Accepted Answer · 2012-10-09 20:45:58Z

1

To uncheck, try:

$("#sOrderByAsc").removeAttr('checked', '');

checked and selected are binary properties, not true/false attributes.

$("#sOrderByDLM").attr('checked', 'checked'); is correct.

So is: .attr('selected', 'selected');

answered Oct 9, 2012 at 20:45

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

2 Comments

VoidKing Over a year ago

This is just another way to do the same thing that is all over this page, and thus produces the same unexpected results.

Tim Down Over a year ago

No, checked is a Boolean attribute. The problem is that the checked attribute maps to the defaultChecked property (which does not change when the user checks or unchecks the checkbox).

Adil · Accepted Answer · 2012-10-09 20:59:11Z

1

If you want to used 'checked' and '' then use removeAttr jquery function instead of assigning '' blank to checked attribute but I do not prefer this one. As assigning true and false looks more symmetrical to me then assigning checked and removing attribute.

$("#sOrderByDLM").attr('checked', 'checked');

$("#sOrderByID").removeAttr('checked');

Use true or false instead of 'checked' and ''

$("#sOrderByDLM").attr('checked', true);

$("#sOrderByID").attr('checked', false);

edited Oct 9, 2012 at 20:59

answered Oct 9, 2012 at 20:45

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

yodog · Accepted Answer · 2012-10-09 20:50:17Z

-1

there is a difference between .attr() and .prop()

aaa

answered Oct 9, 2012 at 20:50

yodog

6,2834 gold badges29 silver badges52 bronze badges

2 Comments

yodog Over a year ago

to someone that should be reading javascript tutorials, you're right, it isn't. to someone that knows at least the basics, the answer is right before the eyes.

Anthony Grist Over a year ago

I'm going to have to agree with @VoidKing and say this isn't an answer; the table doesn't address setting values at all, it just states what is returned when you use the various functions to get values. Yes, somebody who is reasonably well versed in the documentation can likely deduce what you're trying to get at, but that doesn't make this useful at all.

Collectives™ on Stack Overflow

Modifying html attributes with jQuery producing unexpected results

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related