Jquery checking checkbox on click doesn't check it

Question

Okay so I'm using the SUPERSIMPLE code to check my checkboxes. I have an invisible ahref over my elements and a checkbox next to them. Here's the html:

<a href="#" class="transparent-checkbox-thingy" id="<?php echo $id;?>" onclick="check(<?php echo $id;?>)"></a>
<input type="checkbox" value="<?php echo $id;?>" name="users[]" class="newconvo-check" id="<?php echo $id;?>">

So I've tried using this method, where my check() function and input tags have the same id, using the following JQ:

function check(id)
{
    var newid = '#'+id;
    $(newid).prop('checked', true);
};

or this one

function check(id)
{

    $('#' + id).prop('checked', true);
};

or this one

function check(id)
{
    $(id).prop('checked', true);
};

None of them work. They return valid info on alert(id) or alert(newid) but they don't check the damned checkbox. So I tried this one:

$(document).ready(function() {
        $("a.transparent-checkbox-thingy").click(function(event) {
            event.preventDefault();
            var thisid = ('#' + event.target.id);
            $(thisid).prop('checked', true);
        });
    });

Didn't work. So I tried this

$(document).ready(function() {
        $("a.transparent-checkbox-thingy").click(function(event) {
            event.preventDefault();
            $('#1').prop('checked', true);
        });
    });

Didn't work. Yes, there is <input type="checkbox"> with id="1" always. And that's the one I'm testing. And yes, I have this

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

where is your script located? Above or below the jQuery you posted? — Sterling Archer
– Sterling Archer, Commented Feb 6, 2014 at 5:05

Krish R · Accepted Answer · 2014-02-06 05:04:51Z

3

You have used same id in <a> and <input type="checkbox", id is unique you cant able use it as multiple place

 <a href="#" class="transparent-checkbox-thingy" id="<?php echo $id;?>" onclick="check(<?php echo $id;?>)"></a>
 <input type="checkbox" value="<?php echo $id;?>" name="users[]" class="newconvo-check" id="<?php echo $id;?>">

Use this,

<a href="#" class="transparent-checkbox-thingy" id="<?php echo $id;?>" onclick="check(<?php echo $id;?>)">Check</a>
<input type="checkbox" value="<?php echo $id;?>" name="users[]" class="newconvo-check" id="c_<?php echo $id;?>">

<script type="text/javascript">

function check(id)
{
    var newid = '#c_'+id;
    $(newid).prop('checked', true);
};

</script>

answered Feb 6, 2014 at 5:04

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

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

2 Comments

Predrag Beocanin Over a year ago

Oh wow that's braindead of me.. Let me fix this and post working version >.< thanks

Predrag Beocanin Over a year ago

Thank you but since I'm passing it via the onclick(id) I don't actually need that id on the <a href.. I was just using it to figure out which checkbox should I tick. Since the value is passed to the fucntion, the id is no longer necessary!

Navin · Accepted Answer · 2014-02-06 05:09:47Z

1

First thing, id is unique, you can't use the same id in two places.

without id, instead you can use the selector as $('input[type="checkbox"]') like this

$('input[type="checkbox"]').prop('checked',true);

or you can use class like this

$('.newconvo-check').prop('checked',true);

JSFiddle

answered Feb 6, 2014 at 5:09

Navin

6144 silver badges12 bronze badges

1 Comment

relic Over a year ago

Should use .prop, not .attr

Indra Yadav · Accepted Answer · 2014-02-06 05:11:41Z

1

Try this example it may help you..

Fiddle

<a href="#" class="transparent-checkbox-thingy" id="1" onclick="check(1)">sdfsf</a>
<input type="checkbox" value="1"  class="newconvo-check" id="2" >

$("a.transparent-checkbox-thingy").click(function(event) {
           // alert('working')
            $('#2').attr("checked","checked");
        });

answered Feb 6, 2014 at 5:11

Indra Yadav

5965 silver badges22 bronze badges

Comments

rynhe · Accepted Answer · 2014-02-06 05:22:20Z

1

Try this

  function checkcheck(id)
  {
        $('input[id^="'+id+'"]').prop('checked', true);
  }

working demo : http://jsfiddle.net/8L5k4/1/

Its working fine..But I dont know how its working I tried with $("input#"+id") its not working so I tried this,Its working :)

answered Feb 6, 2014 at 5:22

rynhe

2,5291 gold badge22 silver badges27 bronze badges

Comments

relic · Accepted Answer · 2014-02-06 05:05:57Z

0

An id must begin with a letter (not a number). If your id = "1", then its an invalid selector, that's why its not getting checked.

EDIT:

From HTML 4 spec:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

So... your issue may have stemmed from having multiple ids on the page, but you're still going to have broken selectors in some browsers due to invalid markup.

answered Feb 6, 2014 at 5:05

relic

1,7241 gold badge16 silver badges26 bronze badges

1 Comment

Predrag Beocanin Over a year ago

It actually works with a number only, but as Krish said, I had two elements with the same id =)

Collectives™ on Stack Overflow

Jquery checking checkbox on click doesn't check it

5 Answers 5

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related