jsp code is
<input
type="button"
class="btn btn-theme02 btn-xs "
value="CheckAll"
onClick="CheckAll(document.myform.checklist)" />
<input
type="button"
class="btn btn-theme02 btn-xs"
value="UnCheckAll"
onClick="UnCheckAll(document.myform.checklist)" />
<input
type="checkbox"
style="width: 20px"
class="checkbox form-control centered"
id="checklist"
name="checklist"
value="<%=voucher.getId()%>" />
Checkboxes are in a table. Checkbox rows are dynamic.
Javascript:
function CheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function UnCheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
CheckAll and UnCheckAll buttons are working if there are two or more checkbox.These buttons not working for single checkbox.
Thanks.
You can do:
$(":checkbox").prop('checked', true);
Try this:
function CheckAll(){
$('input[type=checkbox]').each(function () {
$(this).prop('checked', true);
});
}
function UnCheckAll(){
$('input[type=checkbox]').each(function () {
$(this).prop('checked', false);
});
}
and remove anything you are passing as parameter. this should work try it and let me know for any further issue.
In traditional JS:
function CheckAll(state) {
var i = 0,
inputs = document.getElementsByTagName('input');
for (i = 0; inputs.length; i++) {
if (inputs[i].type === 'checkbox') {
inputs[i] = state;
}
}
}
checkAll(true); // to check
checkAll(false); // to uncheck
Related
var radios = document.getElementsByTagName('input');
for (i = 0; i < radios.length; i++) {
radios[i].onclick = function () {
if (this.checked) {
this.checked = false;
}
}
}
<div id = "container">
<input type = "radio" name = "x"> A
<br>
<input type = "radio" name = "x"> B
</div>
what i want is to check one of the radios and if i pressed the checked radio again to uncheck it but it does not check in first place too
how to uncheck a checked radio after it was checked and how to even tell that it is checked or in empty state
I will suggest that you use attribute to control the checked status.
var x = document.getElementsByName('x');
x.forEach(function(e) {
e.addEventListener('click', function(ev) {
// set checked by data-checked attribute
if (e.getAttribute('data-checked') == 'true') {
e.checked = false;
e.setAttribute('data-checked', 'false');
} else {
e.checked = true;
e.setAttribute('data-checked', 'true');
}
// update attribute of all radios
x.forEach(function(e2) {
e2.setAttribute('data-checked', e2.checked);
});
});
});
<input type="radio" name="x" data-checked="false"> A<br>
<input type="radio" name="x" data-checked="false"> B<br>
<input type="radio" name="x" data-checked="false"> C<br>
Using your current JavaScript code, the moment you click it, it will be checked first before reading the JavaScript code, thus it will appear to be unchecked always. With my suggestions (it can't be helped sorry) use something like this:
var radios = document.getElementsByTagName('input');
for (i = 0; i < radios.length; i++) {
radios[i].onmousedown = function () {
if (this.checked) {
this.checked = false;
this.onchange = function () {
this.checked = false;
}
}
else {
this.checked = true;
this.onchange = function () {
this.checked = true;
}
}
}
}
<div id = "container">
<input type = "radio" name = "x"> A
<br>
<input type = "radio" name = "x"> B
</div>
Since I can't question you why you can't use checkbox instead, I had to do this. It works for me anyway
Use the following code. This is the whole code, try using it:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body >
<div id = "container">
<input type = "radio" name = "x"> A
<br>
<input type = "radio" name = "x"> B
</div>
</body>
<script type="text/javascript">
var radios = document.getElementsByTagName('input');
for (i = 0; i < radios.length; i++) {
radios[i].onclick = function () {
console.log("==>" , this.checked);
if (this.checked == false) {
this.checked = true;
}else{
this.checked = true;
}
}
}
</script>
</html>
Programatically checking all checkbox doesn't work properly when any of the target checkboxes checked / unchecked manually
I have two methods, where one will check all the checkboxes and other will un check all the checkbox values
I named them selectAll and unSelectall. when selectAll is triggered, it will check all the checkbox but when unSelectall is triggered it unchecks all the checkbox but what the problem is when you check / uncheck the any of the target checkboxes and then you click the checkall or uncheck all, the manually checked/ unchecked checkboxes don't work. here is the working code on fiddle
function selectAll() {
const checkboxes = document.querySelectorAll('.myCheck');
let i = 0;
while(i < checkboxes.length) {
checkboxes[i].setAttribute("checked", "checked");
i++;
}
}
function unSelectAll() {
const checkboxes = document.querySelectorAll('.myCheck');
let i = 0;
while(i < checkboxes.length) {
checkboxes[i].removeAttribute("checked", "");
i++;
}
}
Instead of setAttribute and removeAttribute, use the direct checked property
function selectAll() {
const checkboxes = document.querySelectorAll('.myCheck');
let i = 0;
while (i < checkboxes.length) {
checkboxes[i].checked = true;
i++;
}
}
function unSelectAll() {
const checkboxes = document.querySelectorAll('.myCheck');
let i = 0;
while (i < checkboxes.length) {
checkboxes[i].checked = false;
i++;
}
}
Demo
<!DOCTYPE html>
<html>
<body>
All:
<input onclick="selectAll();" type="checkbox" id="all"> uncheckAll:
<input onclick="unSelectAll();" type="checkbox" id="all">
<br/> ckbx1:
<input type="checkbox" class="myCheck"> ckbx2:
<input type="checkbox" class="myCheck"> ckbx3:
<input type="checkbox" class="myCheck"> ckbx4:
<input type="checkbox" class="myCheck">
<p>checl all and uncheck all</p>
<script>
function selectAll() {
const checkboxes = document.querySelectorAll('.myCheck');
let i = 0;
while (i < checkboxes.length) {
checkboxes[i].checked = true;
i++;
}
}
function unSelectAll() {
const checkboxes = document.querySelectorAll('.myCheck');
let i = 0;
while (i < checkboxes.length) {
checkboxes[i].checked = false;
i++;
}
}
</script>
</body>
</html>
I'm trying to arrange a checkbox array with jQuery. I have managed to get the values to add to the array in order and remove the correct one, but for the life of me i cannot get it to replace the removed value with the newly selected value. Currently it just adds the new value to the end of the array.
Here's my code so far:
var array = [];
$('input[type="checkbox"]').click(function () {
if ($(this).attr('checked')) {
// Add the new element if checked:
array.push($(this).attr('value'));
$('#ff_elem512').val(array);
}
else {
// Remove the element if unchecked:
for (var i = 0; i < array.length; i++) {
if (array[i] == $(this).attr('value')) {
array.splice(i, 1);
$('#ff_elem512').val(array);
}
}
}
console.log(array);
});
Thanks in advance
Use Jquery is function instead of attr like Below
var array = [];
$('input[type="checkbox"]').click(function () {
if ($(this).is('checked')) {
// Add the new element if checked:
array.push($(this).attr('value'));
$('#ff_elem512').val(array);
}
else {
// Remove the element if unchecked:
for (var i = 0; i < array.length; i++) {
if (array[i] == $(this).attr('value')) {
array.splice(i, 1);
$('#ff_elem512').val(array);
}
}
}
console.log(array);
});
var array = [];
$('input[type="checkbox"]').change(function() {
if ($(this).prop('checked')) {
// Add the new element if checked:
if (array.indexOf($(this).val()) < 0) {
array.push($(this).val());
}
} else {
// Remove the element if unchecked:
if (array.indexOf($(this).val()) >= 0) {
array.splice(array.indexOf($(this).val()), 1);
}
}
$('#ff_elem512').val(array.join(", "));
console.log(array);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" />One
<input type="checkbox" value="2" />Two
<input type="checkbox" value="3" />Three
<input type="checkbox" value="4" />Four
<input type="checkbox" value="5" />Five
<br />
<input type="text" id="ff_elem512" />
You can always set your array when you click some checkbox, like this:
$('input[type="checkbox"]').click(function () {
array = [];
$("input[type=checkbox]:checked").each( function () {
array.push($(this).val());
});
console.log(array);
});
Here is a fiddle: https://jsfiddle.net/9ssyxvv2/
UPDATE: If you want to preserver the clicked order, use this instead:
$('input[type="checkbox"]').click(function () {
var elem=$(this);
if (this.checked) {
array.push($(this).val())
} else {
array = array.filter(function(x){
return x != $(elem).val() });
}
console.log(array);
});
I want to give each check box an integer value and then if the box is checked add the values and display the total in a text box with the ID="options". So far the code is not sending a value to the desired location. Any instruction on how to improve the code would be helpful. Thank you.
<html>
<body>
<form id="registration" name="registration">
<input name="opt1" value="5" type="checkbox"> Breakfast ($5)
<input name="opt2" value="10" type="checkbox"> Lunch ($10)
<input name="opt3" checked="checked" value="0" type="checkbox"> Happy Hour (free!)
<input id="options" name="options" type="text">
</form>
</body>
</html>
<script>
function getOptions() {
var form = document.getElementById("registration"),
inputs = form.getElementsByTagName("input"),
result = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type === "checkbox" && inputs[i].checked) {
result += inputs[i].value;
document.getElementById("options").value = result;
}
}
}
getOptions();
</script>
You may need to attach onchange event handlers to the checkboxes as shown below. And you should parse inputs[i].value to a number using parseFloat() before adding it to result.
var form = document.getElementById("registration"),
inputs = form.getElementsByTagName("input");
function getOptions() {
var result = 0;
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type === "checkbox" && inputs[i].checked) {
result += parseFloat(inputs[i].value);
}
}
document.getElementById("options").value = result;
}
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type === "checkbox") {
inputs[i].onchange = function () {
getOptions();
}
}
}
getOptions();
JSFiddle
Is there a quick way or function that would tell me true/false if all check boxes are deselected? Without going through array? (with JS and HTML)
All my check boxes have the same name...
<form action="/cgi-bin/Lib.exe" method=POST name="checks" ID="Form2">
<input type=checkbox name="us" value="Joe" ID="Checkbox1">
<input type=checkbox name="us" value="Dan" ID="Checkbox2">
<input type=checkbox name="us" value="Sal" ID="Checkbox3">
</form>
jQuery would be a mass of unneeded bloat for a task this trivial. Consider using it if you are running it for other purposes, but all you need is something like this:
function AreAnyCheckboxesChecked () {
var checkboxes = document.forms.Form2.elements.us;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
return true;
}
}
return false;
}
You have to loop through them. Even a library like jQuery will loop through them, just hide it from you.
var form = document.getElementById('Form2');
var inputs = form.getElementsByTagName('input');
var is_checked = false;
for(var x = 0; x < inputs.length; x++) {
if(inputs[x].type == 'checkbox' && inputs[x].name == 'us') {
is_checked = inputs[x].checked;
if(is_checked) break;
}
}
// is_checked will be boolean 'true' if any are checked at this point.
JavaScript:
var allischecked = (function(){
var o = document.getElementById("Form2").getElementsByTagName("input");
for(var i=0,l=o.length;i<l;i++){
o[i].type === "checkbox" && o[i].name === "us" && o[i].checked || return false;
}
return true;
})();
With jQuery:
var allischecked = ($("#Form2 input:checkbox:not(checked)").length === 0);
In summary, this snipped will return true if all are NOT checked. It bails out as soon as a checked one is found.
var a = document.getElementsByName("us");
for(var i=0; i<a.length; i++)
if(a[i].checked)
return false;
return true;
(did not test, but conceptually it is valid)
What do you mean by
Without going through array
?
You could just do
function check() {
var anyChecked = false;
var form = document.getElementById('Form2');
var checkboxes = form.getElementsByTagName('input');
for(var i=0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
anyChecked = true;
break;
}
}
alert("Checkboxes checked? " + anyChecked);
}
Working Demo
If you have a large amount of checkboxes that you don't want to loop through to test it might be more efficient to use this approach.
var checked = 0;
$("input[type=checkbox]").live("click", function() {
if($(this).attr("checked")) checked++;
else checked--;
}
Then you would be able to test like this.
if(checked === 0) {
doSomething();
}
The proper solution with jQuery attribute checked:
$checkboxes = $('#Form2 input:checkbox');
$checkboxes.on('click', checkboxes);
function checkboxes() {
var allChecked = $checkboxes.not(':checked').length == 0;
console.log(allChecked);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form action="/cgi-bin/Lib.exe" method=POST name="checks" ID="Form2">
<input type=checkbox name="us1" value="Joe" ID="Checkbox1"><label>Joe</>
<input type=checkbox name="us2" value="Dan" ID="Checkbox2"><label>Dan</>
<input type=checkbox name="us3" value="Sal" ID="Checkbox3"><label>Sal</>
</form>
Even easier without loop
const toggleCheckboxes = checkbox => {
if(checkbox.checked){
return true
}else{
if(document.querySelectorAll(':checked').length === 0){
// All are unchecked
return false
}
}
}