We Keep Coding

How can I disable all checkboxes on webpage at once?

I have several sets of checkboxes on a webpage. I want to uncheck them all with javascript. Right now, I do it by looking for the names of each set and unchecking them with FOR loops like this...
for (i=0;i<document.getElementsByName("myboxes").length;i++) {
document.getElementsByName("myboxes")[i].checked=false;}
for (i=0;i<document.getElementsByName("moreboxes").length;i++) {
document.getElementsByName("moreboxes")[i].checked=false;}
for (i=0;i<document.getElementsByName("evenmoreboxes").length;i++) {
document.getElementsByName("evenmoreboxes")[i].checked=false;}
I'm looking for a way to target them all with one loop. I could do getElementsByTagName('input') to target all INPUTS, but that's a problem because I have some radio inputs that I don't want to uncheck. Is there a way to target all checkbox inputs?
Thanks for the suggestions. I just thought of something. Each NAME I use has the word "boxes" in it, myboxes, moreboxes, evenmoreboxes. Is there a way to target the word "boxes" in in the name, like a wildcard, something like document.getElementsByName("*boxes") that way if I add a set of checkboxes at some point that I don't want to uncheck I can simply name them differently.

You can select all checked checkboxes and reset their state:
function uncheckAll() {
document.querySelectorAll('input[name$="boxes"]:checked')
.forEach(checkbox => checkbox.checked = false);
}
<input type="checkbox"/>
<input type="checkbox" name="a_boxes" checked/>
<input type="checkbox"/>
<input type="checkbox" name="b_boxes" checked/>
<input type="checkbox" name="c_boxes" checked/>
<button onclick="uncheckAll()">Reset</button>

you can use document.querySelectorAll('input[type="checkbox"]'); to get a list of them all. then run your loop

My proposal is:
document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => echecked=false);
document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => e.checked=false);
<input type="checkbox" name="myboxes" value="1" checked>1<br>
<input type="checkbox" name="moreboxes" value="2" checked>2<br>
<input type="checkbox" name="evenmoreboxes" value="3" checked>3<br>

As suggested by #imjared, you can use querySelectorAll, but you will have to iterate over it:
querySelectorAll('input[type="checkbox"]').forEach(c => c.checked = false);
Here is the doc for querySelectorAll

Hide div for Radio button selected value using jquery- Not working

I want to hide a div (AppliedCourse), when radi button value is Agent. I wrote below code but it is not working.
Any idea?
$('#HearAboutUs').click(function() {
$("#AppliedCourse").toggle($('input[name=HearAboutUs]:checked').val()='Agent');
});
<tr><td class="text"><input type="radio" name="HearAboutUs" value="Press">Press & Print media
<input type="radio" name="HearAboutUs" value="Internet">Internet
<input type="radio" name="HearAboutUs" value="Agent">Agent
<input type="radio" name="HearAboutUs" value="Friend">Friend
<input type="radio" name="HearAboutUs" value="Other" checked="checked">Other</td></tr>

Either your HTML is incomplete or your first selector is wrong. It is possible that your click handler is not being called because you have no element with id 'HeadAboutUs'. You might want to listen to clicks on the inputs themselves in that case.
Also, your logic is not quite right. Toggle hides the element if the parameter is false, so you want to negate it using !=. Try:
$('input[name=HearAboutUs]').click(function() {
var inputValue = $('input[name=HearAboutUs]:checked').val()
$("#AppliedCourse").toggle( inputValue!='Agent');
});
I have made a JSFiddle with a working solution: http://jsfiddle.net/c045fn2m/2/

Your code is looking for an element with id HearAboutUs, but you don't have this on your page.
You do have a bunch of inputs with name="HearAboutUs". If you look for those, you'll be able to execute your code.
$("input[name='HearAboutUs']").click(function() {
var clicked = $(this).val(); //save value of the input that was clicked on
if(clicked == 'Agent'){ //check if that val is "Agent"
$('#AppliedCourse').hide();
}else{
$('#AppliedCourse').show();
}
});
JS Fiddle Demo
Another option as suggested by #Regent is to replace the if/else statement with $('#AppliedCourse').toggle(clicked !== 'Agent');. This works too.

Here is the Fiddle: http://jsfiddle.net/L9bfddos/
<tr>
<td class="text">
<input type="radio" name="HearAboutUs" value="Press">Press & Print media
<input type="radio" name="HearAboutUs" value="Internet">Internet
<input type="radio" name="HearAboutUs" value="Agent">Agent
<input type="radio" name="HearAboutUs" value="Friend">Friend
<input type="radio" name="HearAboutUs" value="Other" checked="checked">Other
</td>
Test
$("input[name='HearAboutUs']").click(function() {
var value = $('input[name=HearAboutUs]:checked').val();
if(value === 'Agent'){
$('#AppliedCourse').hide();
}
else{
$('#AppliedCourse').show();
}
});

Check value of radio buttons

<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked> Tee
<span id="check" >check</span>
And jQuery:
function check()
{
alert($('input[name=group2]').val());
}
$('#check').click(function(){
check();
});
$('input[name=group2]').change(function(){
check()
})
Live: http://jsfiddle.net/j9cj5/
Why this always show me Water? How can i check value of these radio buttons? I would like check this if i change this value and if i click on check.

The selector $('input[name=group2]') will select all the elements with that name, and val() returns only the value for the first element in the collection, so that's always Water. You have to target just the checked radio :
function check() {
alert( $('input[name=group2]:checked').val());
}
FIDDLE

Replace $('input[name=group2]') with $('input[name=group2]:checked') :)
Demo: http://jsfiddle.net/hungerpain/j9cj5/2/
The reason this happens is because $('input[name=group2]') will generate an array of all your radio buttons and thus will give only the first element (which happens by default). So get the selected element, you must use the :checked pseudo selector.

Try like this
function check(val) {
alert(val);
}
$('input[name=group2]').change(function(){
check($(this).val());
});
This is working FIDDLE

jQuery button to check all check boxes issue

I have a button that checks all checkboxes in a div and un-checks.
However if I were to manually check one checkbox, then hit the Check all button and then uncheck all, the checkbox which was manually checked does not become unchecked!
Any ideas?
http://jsfiddle.net/hM5bu/1/

Thats because jQuery was changed in 1.6
Using attr instead of prop is what is breaking it.
Try using prop instead
Updated fiddle: http://jsfiddle.net/hM5bu/2/
See this question: .prop() vs .attr() for more about prop and attr in jQuery 1.6

here is a solution:
<input type="checkbox" name="todos" id="todos" /> All<br/>
<input class="marcartodos" type="checkbox" name="marcado[]" value="1" />1<br/>
<input class="marcartodos" type="checkbox" name="marcado[]" value="2" />2<br/>
<input class="marcartodos" type="checkbox" name="marcado[]" value="3" />3<br/>
<input class="marcartodos" type="checkbox" name="marcado[]" value="4" />4<br/>
<script type="text/javascript">
$(function() {
$("#todos").click(function() {
if ($(this).is(':checked'))
$(".marcartodos").attr('checked', true);
else
$(".marcartodos").attr('checked', false);
});
});
</script>

How to get a radio button index number from a each function in jquery

When using the each() function in jquery for a group of, let's say, 3 radio buttons, how do I retrieve the 3rd button so when it's checked something happens?
Basically how do I choose the element I want to work with from the each() function?
Here is my coding:
HTML:
<form id="orderDefinition" name="orderDefinition">
<fieldset>
<input type="radio" name="radioGroup" /><label for="">radio 1</label>
<input type="radio" name="radioGroup" /><label for="">radio 2</label>
<input type="radio" name="radioGroup" /><label for="">radio 3</label>
</fieldset>
</form>
jQuery:
var radioBtnCollection = $("#orderDefinition input:radio");
$(radioBtnCollection).each(function(){
// From here, I don't know how to get the element
});
Thanks in advance.

You can refer to the element using the this operator:
radioBtnCollection.each(function(){
alert(this.name);
});
Or by using the arguments supplied to the function:
radioBtnCollection.each(function(index, element){
if (index == 2 && element.checked)
alert("3rd element is checked!");
});
If you want to perform any jQuery methods on the element, you will need to wrap it with jQuery. For the first example, $(this), for the second example $(element).
You can just get the third radio button using :eq(2), instead of each:
if ($("#orderDefinition input:radio:eq(2)")[0].checked)
alert("3rd element is checked!");

Use this wrapped as a jQuery object:
$(radioBtnCollection).each(function(){
// this points to the element being iterated
$(this)
});