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, Oct 09 '12 at 21:09

score 3 · Accepted Answer · answered Oct 09 '12 at 20:50

3

Try using bools and .prop()

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

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

answered Oct 09 '12 at 20:50

Sushanth --

55,259
9
66
105

Adil · Answer 2 · 2012-10-09T20:59:11.623

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);

score 1 · Answer 3 · answered Oct 09 '12 at 20:45

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 09 '12 at 20:45

Diodeus - James MacFarlane

112,730
33
157
176

This is just another way to do the same thing that is all over this page, and thus produces the same unexpected results. – VoidKing Oct 09 '12 at 20:54
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). – Tim Down Oct 09 '12 at 23:19

score -1 · Answer 4 · answered Oct 09 '12 at 20:50

-1

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

aaa

answered Oct 09 '12 at 20:50

RASG

5,988
4
26
47

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. – RASG Oct 09 '12 at 20:58
2

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. – Anthony Grist Oct 09 '12 at 21:15

Modifying html attributes with jQuery producing unexpected results

4 Answers4