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
Related
how do I select all checkboxes when the first radio input is selected & uncheck all checkboxes when the second radio input is selected? (Javascript)?
I've looked into previous similar questions on here, but they all seem to be about using checkboxes rather than radio buttons, or there aren't ways to unselect.
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
Get a list of HTML nodes by class using document.querySelectorAll(). Iterate the radios list using NodeList.forEach(), and add a change event listener to each radio button. Whenever the listener is called, iterate the checkboxes array with NodeList.forEach(), and update the checked value of each element:
var checkboxes = document.querySelectorAll('.custom-selector');
var radios = document.querySelectorAll('.permission');
radios.forEach(function(el) {
el.addEventListener('change', function(e) {
var checked = el.value === 'select';
checkboxes.forEach(function(el) {
el.checked = checked;
});
});
});
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
You can do it using JQuery.
$('.permission').click(function() {
$('.custom-selector').prop('checked', $(this).val() == 'select');
});
See below Code Snippet
$('.permission').click(function() {
$('.custom-selector').prop('checked', $(this).val() == 'select');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
function handleChange(e) {
if (e.target.value == "select") {
handleCheckUncheck(true);
}
if (e.target.value == "deselect") {
handleCheckUncheck(false);
}
}
function handleCheckUncheck(value) {
document.querySelectorAll("input[type='checkbox']").forEach(function(val) {
val.checked = value;
})
}
document.querySelectorAll("input[type='radio']").forEach(function(val) {
val.addEventListener("change", handleChange);
})
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
You can do it in a simple way without using jQuery.
Add a checkbox whose status will be set for others.
<label><input type="checkbox" onClick="toggle(this)" /> Select All</label>`
And use this javascript function that will check other checkboxes with the 'custom-selector' class:
function toggle(source) {
checkboxes = document.getElementsByName('custom-selector[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
If someone checks the "Select All" checkbox, all others will also be selected. If it deselects, the effect will be the same.
Regards!
I agree with #OriDrori's answer, You don't need to load jQuery to do such a simple task.
The code doesn't run, doesn't show any error as well
Here is my fiddle
function selectall(source, course) {
checkboxes = document.getElementById(course);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')">
<br>
checkbox 1
<input id="trainingOverview1" type="checkbox" class="" name="fasd"><br>
<br>
checkbox 2
<input id="trainingOverview1" type="checkbox" class="" name="fadddsd"><br>
-----------------------------------------
<br><br>
checkbox set 2
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview2')">
<br>
checkbox 1
<input id="trainingOverview2" type="checkbox" class="" name="fasd"><br>
<br>
checkbox 2
<input id="trainingOverview2" type="checkbox" class="" name="fadddsd"><br>
An id in a page should be unique. In addition, document.getElementById() returns a single element, and not an array or array like object of elements.
Use classes, and select them using document.getElementsByClassName() or document.querySelectorAll():
function selectall(source, course) {
var checkboxes = document.getElementsByClassName(course);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')">
<br>
checkbox 1
<input class="trainingOverview1" type="checkbox" class="" name="fasd"><br>
<br>
checkbox 2
<input class="trainingOverview1" type="checkbox" class="" name="fadddsd"><br>
-----------------------------------------
<br><br>
checkbox set 2
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview2')">
<br>
checkbox 1
<input class="trainingOverview2" type="checkbox" class="" name="fasd"><br>
<br>
checkbox 2
<input class="trainingOverview2" type="checkbox" class="" name="fadddsd"><br>
If you can't change the HTML, you can select multiple non unique ids by using document.querySelectorAll(), but that depends on browser's implementation, and might not work in the future:
function selectall(source, course) {
var checkboxes = document.querySelectorAll('#' + course);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')">
<br>
checkbox 1
<input id="trainingOverview1" type="checkbox" class="" name="fasd"><br>
<br>
checkbox 2
<input id="trainingOverview1" type="checkbox" class="" name="fadddsd"><br>
-----------------------------------------
<br><br>
checkbox set 2
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview2')">
<br>
checkbox 1
<input id="trainingOverview2" type="checkbox" class="" name="fasd"><br>
<br>
checkbox 2
<input id="trainingOverview2" type="checkbox" class="" name="fadddsd"><br>
The id must be unique to each DOM element the correct way to create a checkbox group is to give the same name for the inputs, you can then fetch them in javascript using document.getElementsByName('name')
function selectall(source,course) {
checkboxes = document.getElementsByName(course);
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"><br>
checkbox 1<input name="trainingOverview1" type="checkbox" class="" ><br><br>
checkbox 2<input name="trainingOverview1" type="checkbox" class="" ><br>
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>
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')
});
});
});
i am fetching roll numbers here which have two radio buttons in 'php'.there will be multiple number of roll numbers so i want to check all the radio buttons whose value are 'yes' at once using a particular radio button or check box.although i didn't write that button in this code as i don't know what to write.please give me a solution using java script.
while($row=mysqli_fetch_assoc($result))
{
echo"<tr><td>{$row['roll']}</td>
</td><td></td><td></td><td></td><td>
<td><input type='radio' name='present[$i]' value='Yes'>YES</td>
</td><td></td><td></td><td>
<td><input type='radio' name='present[$i]' value='No'>NO</td></tr>";
$i++;
}
This type of interaction should be using a Javascript implementation since it is a client-side operation.
HTML:
<form>
<input type="radio" name="radio1" value="yes"/>Yes
<input type="radio" name="radio1" value="no"/>No
<br />
<input type="radio" name="radio2" value="yes"/>Yes
<input type="radio" name="radio2" value="no"/>No
<br />
<input type="radio" name="radio3" value="yes"/>Yes
<input type="radio" name="radio3" value="no"/>No
<br />
<input type="button" value="Select All" onclick="selectAll('radio',true);"/>
<input type="button" value="Deselect All" onclick="selectAll('radio',false);"/>
</form>
Javascript:
function selectAll( prefix, set ) {
var form = document.forms[0], //Get the appropriate form
i = 0,
radio;
while( radio = form[prefix + ++i] ) //Loop through all named radio# elements
for( var j = 0; j < radio.length; j++ ) //Loop through each set of named radio buttons
if( radio[j].value == (set ? "yes" : "no") ) //Selector based on value of set
radio[j].checked = true; //Check that radio button!
}
JSFiddle