.checked=true not working with jquery $ function

i want to select a checkbox when a button is clicked.

<form action="" method="post" id="form2"&g开发者_开发百科t;
    <input type="checkbox" id="checkone" value="one" name="one" />
    <input type="button" value="Click me" id="buttonone"/>
</form>

when i tried the following, the checkbox was not getting selected

$('#buttonone').click(function() {
    $('#checkone').checked=true;
});

then i tried:

$('#buttonone').click(function() {
    document.getElementById('checkone').checked=true;
});

this time the checkbox got selected. why isn't it getting selected with the jquery $ function?

Try

$('#checkone').attr('checked', true);

or

$('#checkone').get(0).checked = true;

or

$('#checkone')[0].checked = true; // identical to second example

The reason your first code didn't work is because you were trying to set the checked property on a jQuery object which will have no visible effect as it only works on the native DOM object.

By calling get(0) or accessing the first item [0], we retrieve the native DOM element and can use it normally as in your second example. Alternatively, set the checked attribute using jQuery's attr function which should work too.

You need to use .attr() for the jQuery object, like this:

$('#buttonone').click(function() {
  $('#checkone').attr('checked', true);
});

But it's better to do it the DOM way, like this:

$('#buttonone').click(function() {
  $('#checkone')[0].checked = true; //get the DOM element, .checked is on that
});

Or, completely without jQuery:

document.getElementById('buttonone').onclick = function() {
  document.getElementById('checkone').checked = true;
};

None of these answers worked for me because I incorrectly had multiple radios with the same name attributes:

<div id="group-one">
  <input type="radio" name="groups" value="1" checked="checked" />
  <input type="radio" name="groups" value="2" />
</div>
<div id="group-two">
  <input type="radio" name="groups" value="1" checked="checked" />
  <input type="radio" name="groups" value="2" />
</div>

Javascript won't recognize the checked attribute (obviously). This was a result of using include to add a similar section of HTML multiple times. Obviously, clicking on a radio button will uncheck the radio toggles with the same name.

Here's a jsfiddle to show that two radio elements can have the attribute checked but only the last one is actually checked:

http://jsfiddle.net/bozdoz/5ecq8/

Again, pretty obvious, but possibly something to watch out for: remove id and name attributes from files that you intend to include into other files multiple times.

Try

$('#checkone').attr('checked', true);

You don't have direct access to DOM object properties because jQuery operates on collections ($(selector) is an array). That's why you have functions defined to manipulate the contents of the returned elements.

try

$('#checkone').attr('checked', true);

cleary googling for "jquery check a checkbox" was the way to go

Or you could simply do

$('#buttonone').click(function() {
    $('#checkone')[0].checked=true;
});

It is because ".checked" is not part of jQuery and you are trying to use it on a jQuery object. If you index a jQuery object at [0] you get the raw Javascript object which ".checked" exists on.

More here: http://phrappe.com/javascript/convert-a-jquery-object-to-raw-dom-object/

try this

    $('#buttonone').click(function() {
  $('#checkone').prop('checked', true);
});