Develop Reference

Javascript does not recognize HTML arrays

How to pass this kind of HTML input to JavaScript so that it recognizes these array values?
<input type="checkbox" id="collection[]" value="0">
<input type="checkbox" id="collection[]" value="1">
<input type="checkbox" id="collection[]" value="2">]
The only idea I have (never played with js this way, tbh) is to reach it through:
$("#collection").val();
But I got undefined error. I have no other idea how to make javascript recognize that variable collection is an array and has to passed as such.
Thanks in advance!

Remember, IDs need to be unique within your document. So set by 'name' not by id.
You can use
$('#someid').is(":checked");
for individually checking each checkbox, or loop through them with a jQuery selector
To loop through them set
<input type="checkbox" name="checkboxes" value="0">
<input type="checkbox" name="checkboxes" value="1">
<input type="checkbox" name="checkboxes" value="2">
Then with jQuery,
$('input[name=checkboxes]:checked').each(function(i, e) {
e.val(); //The value of the checkbox that is selected
});

You cannot have Duplicate Ids. Though duplicate IDs will give you desired output in this case, it is invalid to use them for multiple elements.
<input type="checkbox" name="collection[]" value="0">
<input type="checkbox" name="collection[]" value="1">
<input type="checkbox" name="collection[]" value="2">
There are many ways you can access array based elements.
jQuery .map(): Alternative is .each()
Demo
$("[name='collection[]']").map(function(){return $(this).val();}).get()
Working Demo for checking checked inputs.
To get the checked checkbox,
$('input').change(function () {
console.log($("[name='collection[]']:checked").map(function () {
return $(this).val();
}).get());
});

$("#collection")
It mean's ,"Find me an element which id's equal collection on page" , of course it can't find anything. You can use .each function and you can use checkboxes attributes. For example ;
var myCheckBoxArray = []
$("input[type='checkbox']").each(function(i,elm){
myCheckBoxArray.push(elm);
});

How to get current html of a dom element

I am trying to retrive html of a dom element "abc".
<div id=abc>
<input id=xyz type=text value="2" />
</div>
<input type=button value="2" onclick="show()"/>
<script>
document.getElementById("xyz").value=5;
function show(){
alert(document.getElementById("abc").innerHTML);
}
</script>
Lets say I modified the value of text box
by entering some value OR
by Javascript code
document.getElementById("xyz").value=5;
but
alert(document.getElementById("abc").innerHTML);
always show me
<input id=xyz type=text value="2" />
Why?
Can anyone tell me how I can get the latest html of the dom element "abc".?

.value will not change the HTML. If you want to do that, use .setAttrubute instead. See this JSFiddle: http://jsfiddle.net/5EFXN/
document.getElementById("xyz").setAttribute('value','5');

How to use .change() check on only part of a page

I have a bunch of html check boxes on a page, but want to have two different groups of checkboxes. I'm thinking that I can assign them into a class or insert them into a div, so that I can somehow refer to them separately...? Just unsure how to do this syntaxically.
For example, currently I'm using
$('input[type=checkbox]').change(function(){ /*insert my code functionality here*\ });
to refer to the checkboxes, but this changes all of my checkboxes, when I only want it to apply to half of them.

You may try this
HTML
<input type="checkbox" value="1" class="group1" name="chk1" />Check One
<input type="checkbox" value="2" class="group1" name="chk2" />Check Two
<input type="checkbox" value="3" class="group2" name="chk3" />Check One
<input type="checkbox" value="4" class="group2" name="chk4" />Check Two​
JS
$('input[type=checkbox].group1').change(function(){
// code
});
$('input[type=checkbox].group2').change(function(){
// code
});
An Example Here.

Use classes to separate them into two groups..
.tobechecked // Assign a class to all the checkboxes that need to
// for this event
$('.tobechecked').change(function(){

Identify the groups by diferent classes, then you can determine it by the class via jquery.
$('.specific_group_class').change(function(){..}

Like you said in your question, use classes.
Then you can do as such:
$(".check-1, .check-2").change(function(e) {
/* do work */
});
See jsFiddle

how to make the condition in jquery with the best way?

<body>
<input class="forminput" type="checkbox" value="test one" checked="checked" name="VD1">
<br>
<input class="forminput" type="checkbox" value="test two" checked="checked" name="VD2">
<br>
<input class="forminput" type="checkbox" value="test three" checked="checked" name="VD3">
<br>
<input class="forminput" type="checkbox" value="test four" checked="checked" name="VD4">
<br>
<input class="forminput" type="checkbox" value="test five" checked="checked" name="VD5">
<br>
<input id="checkall" type="checkbox" checked="checked" name="checkall">
<input id="copyvalue" class="button" type="button" value="copy test">
</body>
i want to check out if the user don't check one check box then if he click the copy test, it will alert a box saying" you at least check one box."
$(document).ready(function(){
$("#copyvalue").click(function(){
if (!$(.forminput).checked){
alert('teet');
}
});
but the code doesn't work.

Your syntax is wrong, and you're missing a closing brace and parenthesis.
You can write
$(document).ready(function(){
$("#copyvalue").click(function(){
if ($(".forminput:checked").length === 0){
alert('teet');
}
});
});
Note that the selector is a string.
The :checked selector filters the elements to checked checkboxes.
This code checks whether there are any :checked .forminput elements.

Part of this problem is that you're missing a closing brace and parenthesis, the code should look like this,
$(document).ready(function() {
$("#copyvalue").click(function() {
// ...
});
});
As #Luis has pointed out, another problem is that you didn't quote the selector for the ".forminput" elements. If you quote them properly, it will look like this:
if (!$(".forminput").checked){
alert('teet');
}
But this still won't work, because as #SLaks and #james have pointed out, ".checked" is not a property that you can call on the jQuery object.
I will give credit to #SLaks for coming up with the middle part of the code that checks for checked elements, i.e.
if ($(".forminput:checked").length == 0){
alert('teet');
}
The reason why you use the length property of the jQuery object is because every jQuery object is a collection of the elements matched by the selector (see http://api.jquery.com/Types/#jQuery):
A jQuery object contains a collection
of Document Object Model (DOM)
elements that have been created from
an HTML string or selected from a
document.
So if the selector for checked input boxes returns a length 0 jQuery object, it means none of the input boxes were checked.
The reason why you wouldn't want to use the jQuery attr method instead,
$(document).ready(function(){
$("#copyvalue").click(function(){
if (!$('.forminput').attr("checked")){
alert('teet');
}
});
});
Is because the attr method get's the value of the attribute for the first element in the set of matched elements. So if every input box except for the first one were checked, the code would trigger a false alert.

the selectors need to be quoted,and checked is a selector rather than a method.
$(document).ready(function(){
$("#copyvalue").click(function(){
if ($(".forminput:checked").length==0){
alert('teet');
}
});
});

.checked=true not working with jquery $ function

i want to select a checkbox when a button is clicked.
<form action="" method="post" id="form2">
<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);
});