Dynamically set a checkbox using JQuery

Question

Im trying to dynamically check a checkbox using JQuery 1.5, based on something the user selects from a dropdown list. When the list changes it returns to this function:

function displaySystemResults(html){
    var v = html.split(",");
    document.getElementById('fUpdateSystemName').value = v[0];
        if (v[1] == "true"){
            alert("true");
            $('#fUpdateActiveFlag').setAttribute('checked','checked');
        }
    }

Here is the dropdown list:

<td valign="top"><form:checkbox path="fUpdateActiveFlag"
name='fUpdateActiveFlag' value="checked" />&nbsp;</td>

I can't get the checkbox to put a tick in the box. Can anyone spot what im doing wrong? I know its hitting the setAttribute method as the alert box is displaying when it should be set to true.

setAttribute() is a method exposed by DOM elements, not jQuery objects. You're probably looking for attr("checked", "checked") or prop("checked", true) or $("#fUpdateActiveFlag")[0].setAttribute("checked", "checked"). — Frédéric Hamidi
– Frédéric Hamidi, Commented Mar 7, 2013 at 10:21

Ruslan · Accepted Answer · 2013-03-07 10:32:51Z

2

$('#fUpdateActiveFlag') is the ID selector.

add it to your checkbox

<td valign="top"><form:checkbox ID="fUpdateActiveFlag" path="fUpdateActiveFlag"
name='fUpdateActiveFlag' value="checked" />&nbsp;</td>

Also, jQuery function is incorrect. setAttribute is the JavaScript function, while it looks like you're using jQuery selector, hence the object you select is jQuery object, which does not have a method called setAttribute, instead, use .attr():

$('#fUpdateActiveFlag').attr('checked','checked')

see working example http://jsfiddle.net/ruslans/8xp9g/

Edit: as per @Dementic 's comment below, you can keep using the name attribute, but then you'll have to change your selector to:

$('[name="fUpdateActiveFlag"]').attr('checked','checked');

see working example: http://jsfiddle.net/ruslans/A4D8f/

edited Mar 7, 2013 at 10:32

answered Mar 7, 2013 at 10:19

Ruslan

10.2k15 gold badges59 silver badges92 bronze badges

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

5 Comments

Rafael Herscovici Over a year ago

or, if you do not want to change the markup $('[name="fUpdateActiveFlag"]').attr('checked', true);

Ruslan Over a year ago

name attribute isn't unique, so I reckon it's best to set an ID here.

maloney Over a year ago

@Tsar and Dementic - thank you both for your responses. Tsar, I couldnt get my code working with your suggestion but Dementic, your code works perfectly so thanks for that! I will accept this as the answer

Johan Over a year ago

use prop() over attr() in newer versions of jquery

Rafael Herscovici Over a year ago

@Johan - not exactly, have a good read stackoverflow.com/questions/5874652/prop-vs-attr

Collectives™ on Stack Overflow

Dynamically set a checkbox using JQuery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related