CODEWITHSUNDEEP
javascriptjquery
Abs
Abs

Reputation: 57916

Not able to tick Checkboxes using JQuery

I am having trouble checking checkboxes via JQuery - I have done this:

if(element[1]==3)
  alert('#'+element[0]+'_1');//shows #chk_1
  $('#'+element[0]+'_1').attr('checked', true);
  $('#'+element[0]+'_2').attr('checked', true);
  $('#'+element[0]+'_3').attr('checked', true);    
}

I know it gets to that point because I can see the alert window with the correct variable name. I have also included JQuery and my firebug isn't complaining about any errors, its just nothing is happening.

I have a few other functions which are active on a user click:

onclick="checker($(this).attr('id'));"

Which essentially checks if a user is allowed to tick the checkbox but this shouldn't get activated if I use the above method, correct? Plus I have done the automated ticks in such a way that those rules are preserved and the user is allowed to tick the checkboxes.

I am able to click the checkboxes and those rule checks are done correctly in the checker function.

HELP! I have no idea what's wrong to be frank.

I appreciate nay help.

Update

With Pekka's advice I have found that no JQuery function seems to be working for example:

$('#'+element[0]+'_1').hide();

Did nothing. So it means the ID of the element has a problem? But the element does exist and its the correct name!

I have given the checkbox a value and tried this:

alert($('#'+element[0]+'_1').val());

I get "undefined" returned! Why?

Update 2

Testing if it has been checked:

$('#'+element[0]+'_1').attr('checked', true);

if ($('#'+element[0]+'_1'+':checked').val() !== null) {
   alert('#'+element[0]+'_1');
}

This showed me the alert box. So it seems it is checked but I can not see it?

Update - Solution

Don't be a noob like me and wrap JQuery code with: $(document).ready(function() {

I managed to waste everyones time having not done this, I think that bit of code is going to become standard for me from now on.

Thank you everyone for the continued help! :) I'll have to give to the person [lillq] that mentioned document load!

Upvotes: 1

Views: 607

Answers (3)

lillq
lillq

Reputation: 15379

One thought is:

If you have more than one chk_1, chk_2, chk_3 ids in your html, the $('#'+element[0]+'_2').attr('checked', true); will only effect the first one in your document.

I ran the code you supplied as such:

html

...
<body>
    <input type="checkbox" id="el1" onclick="checker($(this).attr('id'));" />Text<br />
    <input type="checkbox" id="el2" onclick="checker($(this).attr('id'));" />Text<br />
    <input type="checkbox" id="el3" onclick="checker($(this).attr('id'));" />Text<br />
</body>
</html>
<script type="text/javascript">
    init();
</script>

javascript

function init () {
    $('#el1').attr('checked', true); 
    $('#el2').attr('checked', true); 
    $('#el3').attr('checked', true); 
}
function checker(id)
{
    alert(id);
}

The init function here checks all of the boxes after the document has loaded. Is there any other info that you could give us help out.

I like to reduce examples like this to the simplest code that fails.

Upvotes: 2

Guffa
Guffa

Reputation: 700152

Changing the checked state could perhaps trigger an onchange event, but certainly not a click event, so that is irrelevant.

You should not set the attribute to true but "checked".

$('#'+element[0]+'_1').attr('checked', 'checked');

See this FAQ entry.

Upvotes: 0

Jonathan Julian
Jonathan Julian

Reputation: 12264

Try ('#'+element[0]+'_1').click();

Upvotes: 0

Related Questions