Develop Reference

need to select all yes/no radio buttons

I was trying to select all yes radio buttons when click on select all, i mean if you click on "yes" and then click on select all must select all fields as yes the same behavior for "no" radio button.
Also i was trying with check-boxes but not sure which is the best ways to achieve it.
<script language="JavaScript">
function selectAll(source) {
checkboxes = document.getElementsByName('bValidation[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
<input type="checkbox" name="bValidation" value="Y"> Y
<input type="checkbox" name="bValidation" value="N"> N
<br><input type="checkbox" id="selectall" onClick="selectAll(this)" />Select All

Change this 'bValidation[]' to this 'bValidation'
function selectAll(source) {
checkboxes = document.getElementsByName('bValidation');
for (var i in checkboxes)
checkboxes[i].checked = source.checked;
}
<input type="checkbox" name="bValidation" value="Y"> Y
<input type="checkbox" name="bValidation" value="N"> N
<br><input type="checkbox" id="selectall" onClick="selectAll(this)" />Select All

instead of writing just name in input type, you have to specify name="bValidation[]" in both inputs.
function selectAll(source) {
checkboxes = document.getElementsByName('bValidation[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
<input type="checkbox" name="bValidation[]" value="Y"> Y
<input type="checkbox" name="bValidation[]" value="N"> N
<br><input type="checkbox" id="selectall" onClick="selectAll(this)" />Select All

for each input type get value with javascript

I'm trying to get the input type value's from input fields that have been generated by a webshop framework. I can't change the html. When I added fields it creates this:
<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">
I found some code that gets the value based on the input id, except that the id's filter_... can change, and are different for every shop.
any sugestions? here's what i've gathered so far.
<script type="text/javascript">
var filter;
function onload() {
filter = document.getElementById('filter');
}
function show() {
alert(filter.value);
}

You were on the right track with .getElementById, but you want instead, .getElementsByName.
var els = document.getElementsByName("filter[]");
for (var i = 0; i < els.length; i++)
alert(els[i].value);
<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

By using document.querySelectorAll, in which you can use any CSS selector with, including an "attribute starts with" selector like input[id^="filter_"] must get your job done.
Here is a demo
var inputs = document.querySelectorAll('input[id^="filter_"]');
debugger;
for (i = 0; i < inputs.length; i++) {
alert(inputs[i].value)
}
<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

Heres the Jquery solution
$('input [id^="filter_"]').each(function(){
alert( $(this).val() );
});

You can get inputs by tag name, then iterate over it.
var inputs, index, len;
inputs = document.getElementsByTagName('input');
len = inputs.length;
for (index = 0; index < len; ++index) {
alert(inputs[index].value)
}

How to move checkmark through the cheboxlist?

So i have checkboxlist
<input type="checkbox" name="colorc" value="black" />Black<br/><br>
<input type="checkbox" name="colorc" value="brown" />Brown<br/><br>
<input type="checkbox" name="colorc" value="white" />White<br/><br>
<input type="button" id="btnClick" value="Color Change"></button>
and when i press button, checkmark moves to next checkbox, the same i want if we have two checkmarks, but without using JQuery, clear JS. Thanks

I guess this would do:
document.getElementById("btnClick").onclick = function(){
var checkBoxes = document.getElementsByName("colorc");
var checked = checkBoxes[checkBoxes.length - 1].checked;
for(var i = checkBoxes.length-1; i > 0; --i){
checkBoxes[i].checked = checkBoxes[i-1].checked;
}
checkBoxes[0].checked = checked;
}
Demo: http://jsfiddle.net/t231c0ga/1/

The current checked input can be selected as:
input[name=colorc]:checked
The next input can be gotten using the general sibling selector (~):
input[name=colorc]:checked ~ input[name=colorc]
Change your inputs from checkboxes to radio buttons, and use this code. If there's no next input, it defaults to the first input:
document.getElementById('btnClick')
.addEventListener('click',function() {
var next=
document.querySelector(
'input[name=colorc]:checked ~ input[name=colorc]'
) ||
document.querySelector('input[name=colorc]');
next.checked= true;
});
<input type="radio" name="colorc" value="black" checked/>Black<br/><br>
<input type="radio" name="colorc" value="brown" />Brown<br/><br>
<input type="radio" name="colorc" value="white" />White<br/><br>
<input type="button" id="btnClick" value="Color Change"></button>

How to select all checkbox using jquery or javascript? [duplicate]

This question already has answers here:
How to select all checkboxes with jQuery?
(15 answers)
Closed 8 years ago.
I have multiple checkboxes , there is a checkbox with select all name, now i want that when some tick
the select all checkbox, then all the checkbox must be selected. I think this will be in jquery.
any tutorial link or codes with hints would be appreciated.the code snip is under...
<input type="checkbox" value="">Select All<br/>
<input type="checkbox" value="">A<br/>
<input type="checkbox" value="">B<br/>
<input type="checkbox" value="">C<br/>
<input type="checkbox" value="">D<br/>
<input type="checkbox" value="">E<br/>
<input type="checkbox" value="">F<br/>
<input type="checkbox" value="">G<br/>
<input type="checkbox" value="">H<br/>

This should check all checkboxes when you check the "Select All" one, and also uncheck all checkboxes when you uncheck it.
$("#selectAll").click(function () {
$(":checkbox").not(this).prop("checked", $(this).is(":checked"));
});
If you don't want the uncheck behavior:
$("#selectAll").click(function () {
if ($(this).is(":checked")) {
$(":checkbox").not(this).prop("checked", true);
}
});
But of course, you must identify it. Do it by adding the id="selectAll" attribute (or any other id you wish, just make sure you change the JavaScript code as well):
<input type="checkbox" value="" id="selectAll">Select All<br/>
<input type="checkbox" value="">A<br/>
<input type="checkbox" value="">B<br/>
<input type="checkbox" value="">C<br/>
<input type="checkbox" value="">D<br/>
<input type="checkbox" value="">E<br/>
<input type="checkbox" value="">F<br/>
<input type="checkbox" value="">G<br/>
<input type="checkbox" value="">H<br/>

<input type="checkbox" id="exp" />Tick All Checkbox<br/>
<input type="checkbox" value="demo1" class="subchkbox"/>No 1<br/>
<input type="checkbox" value="demo2" class="subchkbox"/>No 2<br/>
<input type="checkbox" value="demo3" class="subchkbox"/>No 3<br/>
<input type="checkbox" value="demo4" class="subchkbox"/>No 4<br/>
<input type="checkbox" value="demo5" class="subchkbox"/>No 5<br/>
<sctipt type="text/javascript">
/*Include the jquery library 1.9.1*/
$(document).ready(function() {
$('#exp').click(function(event) {
if(this.checked) {
$('.subchkbox').each(function() {
this.checked = true;
});
}else{
$('.subchkbox').each(function() {
this.checked = false;
});
}
});
});
[the fiddle is here][1]

Using jQuery :
$("input[type=checkbox]").prop({ checked : true })
JSFiddle
Using pure JavaScript :
var inputs = document.querySelectorAll('input[type=checkbox]')
Object.keys(inputs).forEach(function(i){
inputs[i].checked = true
})
JSFiddle

$("checkboxContainer").find("input[type='checkbox']").each(function() {
$(this).prop("checked", true);
});
I think using .find() is faster when selecting multiple elements.

If you want to do this in plain JS, it's also pretty simple.
You just have to loop through all of the inputs and set checked to true (or false), which isn't very efficient.
document.getElementById("all").addEventListener("change", function() {
if (this.checked) {
var boxes = document.getElementsByTagName("input");
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].type === "checkbox") {
boxes[i].checked = true;
}
}
} else {
var boxes = document.getElementsByTagName("input");
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].type === "checkbox") {
boxes[i].checked = false;
}
}
}
});
<input type="checkbox" value="" id="all">Select All
<br/>
<input type="checkbox" value="">A
<br/>
<input type="checkbox" value="">B
<br/>
<input type="checkbox" value="">C
<br/>
<input type="checkbox" value="">D
<br/>
<input type="checkbox" value="">E
<br/>
<input type="checkbox" value="">F
<br/>
<input type="checkbox" value="">G
<br/>
<input type="checkbox" value="">H
<br/>

Derived from the current answer marked as correct, it can all be much simpler:
$(document).ready(function()
{
$('#exp').click(function(event)
{
$('.subchkbox').prop({
checked: $(this).prop('checked')
});
});
});

Display all selected checkboxes

I'm trying to display all selected checkboxes from this form.
<form name="myform">
Select a check box: <br> <br>
Check Box 0: <input TYPE="checkbox" NAME="checkBox" checked> <br>
Check Box 1: <input TYPE="checkbox" NAME="checkBox"> <br>
Check Box 2: <input TYPE="checkbox" NAME="checkBox"> <br>
Check Box 3: <input TYPE="checkbox" NAME="checkBox"> <br> <br>
<input type="button" name="button" Value="Click Me" onClick="getCheckedBoxes(this.form)">
</form>
Here is JS code. I'm stuck here now and can't make it working. Thank you in advance.
function getCheckedBoxes(checkBox) {
var checkboxes = document.getElementsByName(checkBox);
var checkboxesChecked = [];
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i]);
}
}
return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}
var checkedBoxes = getCheckedBoxes("checkBox");
alert ("Check box " + checkedBoxes + " is selected ");

You need to alert inside the function you call onclick and you need to store the index instead of the object. If you store the object you will alert
Check box: [object HTMLInputElement],[object HTMLInputElement] is selected
instead of the index.
Live Demo
function getCheckedBoxes(boxName) {
var checkboxes = document.getElementsByName(boxName);
var checkboxesChecked = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxesChecked.push(i); // or i+1 if you want 1-based
}
}
return checkboxesChecked.length > 0 ? checkboxesChecked : "none";
}
function count(name) {
alert("Checked boxes: " + getCheckedBoxes(name));
}
<form name="myform">
Select a check box: <br> <br> Check Box 0: <input TYPE="checkbox" NAME="checkBox" checked> <br> Check Box 1: <input TYPE="checkbox" NAME="checkBox"> <br> Check Box 2: <input TYPE="checkbox" NAME="checkBox"> <br> Check Box 3: <input TYPE="checkbox" NAME="checkBox"> <br> <br>
<input type="button" name="button" Value="Click Me" onClick="count('checkBox')">
</form>
Update using
selector
event listener
spread operator
I needed to update the HTML to have IDs on the checkbox OR read the label content
function getCheckedBoxes(boxName) {
var checkedBoxes = document.querySelectorAll("[name="+boxName+"]:checked");
var ids = [...checkedBoxes].map(x => x.id)
return ids.length===0?"":ids.join(", ");
}
document.getElementById("button").addEventListener("click",function() {
console.log(
getCheckedBoxes(this.getAttribute("data-name"))
)
});
<form name="myform">
Select a check box:<br/>
<label>Check Box 0: <input id="chk0" TYPE="checkbox" NAME="checkBox" checked /></label><br/>
<label>Check Box 1: <input id="chk1" TYPE="checkbox" NAME="checkBox" /></label><br/>
<label>Check Box 2: <input id="chk2" TYPE="checkbox" NAME="checkBox" /></label><br/>
<label>Check Box 3: <input id="chk3" TYPE="checkbox" NAME="checkBox" /></label><br/>
<input type="button" id="button" value="Click Me" data-name="checkBox" />
</form>