JavaScript check all and uncheck all for checkbox - javascript

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document[formname].getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
<form name="myform">
<li>
<label class="cba">
Check All |
UnCheck All
</label>
</li>
<li>
<input class="cba" type="checkbox" name="content1" value="1"<?php checked('1', $slct); ?>/>
</li>
<li>
<input class="cbc" type="checkbox" name="content2" value="2"<?php checked('2', $copy); ?>/>
</li>
<li>
<input class="cbx" type="checkbox" name="content3" value="3"<?php checked('3', $cut); ?>/>
</li>
</form>
I have made the toggle option for the checkbox check all and uncheck all. Still now check all and uncheck all is not working I get the error in console while viewing in Firebug. Here is the screenshot I attached.
I am not sure what was my mistake:
Any suggestion would be great.

Your syntax is incorrect. Your missing the .forms so it should look like this
document.forms[formName].getElementsByTagName("input");

function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document.forms[formname].getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
Finally based on #Mark Walters Suggestion I Correct the problem. Here is the One I changed based on his suggestion.
Thanks for all your Help. Happy Day

Javascript function to toggle (check/uncheck) all checkbox.
function checkAll(bx)
{
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++)
{
if(cbs[i].type == 'checkbox')
{
cbs[i].checked = bx.checked;
}
}
}

function checkAll(bx) {
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
Have that function be called from the onclick attribute of your checkbox to check all.
<input type="checkbox" onclick="checkAll(this)">

Try this:
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document.form.myform.getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}

For specific checkboxes, you can use this:
function checkBoxes(pForm, boxName) {
for (i = 0; i < pForm.elements.length; i++)
if (pForm.elements[i].name == boxName)
pForm.elements[i].checked = pForm.elements[i].checked ? false : true;
}

Related

How can I uncheck all the checkboxes?

I'm trying to give an option for the user to select another way to proceed with the operation, and they are needed to select just one checkbox for each radio. So how can I get uncheck all the checkbox if the number of checkboxes selected overpass 1?
function testaCheck(idMaster){
var inputs,i,checados=0;
inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
if(inputs[i].type=="checkbox"){
if(inputs[i].checked==true){
checados++;
document.getElementsByName('DS_MD'+idMaster).value = idMaster;
$("#formSelectMAWB").find("#masterDireto").val(idMaster);
}
}
}
if(checados>1){
alert("Só pode haver um item selecionado.");
document.getElementsByTagName(inputs.checked=false);
return ;
}
};
<label class="input-control radio">
<input type="radio" name="idMAWB" id="idMAWB" value="<%=ID_CD_MAWB%>" onClick="selecionaMAWB(this.value)">
<span class="helper"><%=DS_MAWB%></span>
</label>
<label for="DS_MD<%=ID_CD_MAWB%>">
<input type="checkbox" name="DS_MD<%=ID_CD_MAWB%>" id="masterDireto<%=ID_CD_MAWB%>" onClick="testaCheck(<%=ID_CD_MAWB%>)">
<span class="helper"> <%=ID_CD_MAWB%> </span>
</label>[layout test][1]
Link: [1]: https://i.stack.imgur.com/ynIAR.png
You should format your code correctly
function testaCheck(idMaster) {
var inputs, i, checados = 0;
inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (inputs[i].checked == true) {
checados++;
document.getElementsByName('DS_MD' + idMaster).value = idMaster;
$("#formSelectMAWB").find("#masterDireto").val(idMaster);
}
if (checados > 1) {
uncheckAll(inputs);
}
}
}
};
function uncheckAll(inputItems){
alert("Só pode haver um item selecionado.");
for (i = 0; i < inputItems.length; i++) {
inputItems[i].checked = false;
}
}
You need to use prop() to set your checkbox.
here is my demo
$("#Allcheck").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
function testaCheck(idMaster) {
var inputs, i, checados = 0;
inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (inputs[i].checked == true) {
checados++;
document.getElementsByName('DS_MD' + idMaster).value = idMaster;
$("#formSelectMAWB").find("#masterDireto").val(idMaster);
}
}
}
if (checados > 1) {
uncheckAll(inputs);
document.getElementsByName('DS_MD' + idMaster).value = null;
$("#formSelectMAWB").find("#masterDireto").val(null);
}
};
function uncheckAll(inputItems){
alert("Só pode haver um item selecionado. Favor refazer a seleção");
for (i = 0; i < inputItems.length; i++) {
inputItems[i].checked = false;
}
}
Thanks for help, here is my final code, where all check can be unchecked and value is set null before uncheck.

Checkall and uncheckall on single button is not worked for single checkbox. Please give me solution

Checkall and uncheckall on single button is worked if there is more than one checkbox present.But it will not worked for single checkbox. Please give me solution that will worked for both if single checkbox present or multiple checkbox present in javascript.
Here is my code
<input type="button" class="btn btn-theme02 btn-xs " id="checkbtn" name="checkbtn" value="CheckAll" onClick="Check(document.myform.checklist1)"/>
<input type="checkbox" style="width: 20px" class="checkbox form-control centered" id="checklist1" name="checklist1" value="<%=voucher.getId()%>"/>
<script>
function Check(chk)
{
if(document.myform.checkbtn.value=="CheckAll"){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
document.myform.checkbtn.value="UnCheckAll";
}else{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
document.myform.checkbtn.value="CheckAll";
}
}
</script>
I have changed the code and create a jsfiddle exampple for the same...
here is the code :-
function Check() {
var checkBoxes = document.getElementsByName("checklist1");
var button = document.getElementsByName("checkbtn")[0];
if (button.value == "CheckAll") {
for (i = 0; i < checkBoxes.length; i++)
checkBoxes[i].checked = true;
button.value = "UnCheckAll";
} else {
for (i = 0; i < checkBoxes.length; i++)
checkBoxes[i].checked = false;
button.value = "CheckAll";
}
}
working example:-http://jsfiddle.net/c2S5d/19/
try like this:
function Check()
{
var chk=document.getElementsByName("checklist1");
if(document.getElementById("checkbtn").value=="CheckAll"){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
document.getElementById("checkbtn").value="UnCheckAll";
}else{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
document.getElementById("checkbtn").value="CheckAll";
}
}
<input type="button" class="btn btn-theme02 btn-xs " id="checkbtn" name="checkbtn" value="CheckAll" onClick="Check()"/>
<input type="checkbox" style="width: 20px" class="checkbox form-control centered" id="checklist1" name="checklist1" value="<%=voucher.getId()%>"/>

Disable table using checkbox

I have this checkbox, how to disable a table (disable all the input fields in the table) whenever I check the checkbox?
<label><input type="checkbox" name="view" value="d">N/A</label>
Is it possible using purely JavaScript and not jQuery.
This is the code now
var elems = document.getElementById('table-id').querySelectorAll('input,select,textarea');
document.getElementById('check').onchange = function () {
if (document.getElementById('check').checked) {
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
} else {
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = false;
}
}
}
and the table
<table id='table-id' border="1">
but it shows error like this:
Uncaught TypeError: Cannot read property 'querySelectorAll' of null
Using jQuery, it is easy:
$("#tableId").find(":input").prop("disabled", true);
Using Javascript, it is a little longer:
var elems = document.getElementById('tableId').querySelectorAll('input,select,textarea');
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
Fiddle: http://jsfiddle.net/abhitalks/6s7QL/2/
Update:
Added your checkbox code:
document.getElementById('checkboxId').onchange = function () {...
Here is the pure JavaScript version to do the trick you want:
var table = document.getElementById('tableId'),
inputs = table.getElementsByTagName('input'),
checkbox = document.getElementById('checkboxId');
checkbox.onchange = function(e) {
if(checkbox.checked) {
disableTable(true);
} else {
disableTable(false);
}
}
function disableTable(disableState) {
for (var i = 0, l = inputs.length; i < l; i++) {
inputs[i].disabled = disableState;
}
}
And here is the working example in JSFiddle.

I am not able to set the Global variable in the following code. What am i doing wrong?

Here is the issue: I am trying check and uncheck the check boxes by a group.
So if you select G1 and G2, it throws a message that you cant mix groups. If you uncheck all of them, i am trying to clear the existing grouping and that is where the code seems to fail.
Any thoughts? (also,i might be having a wrong idea about that global var at the beginning. so please suggest)
<HTML>
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "")
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
}
</script>
<body>
G1<input type="checkbox" value="zxc" id="12" onclick="javascript:VerifyGroup('g1',12);"><BR>
G1<input type="checkbox" value="zxcw" id="123" onclick="javascript:VerifyGroup('g1',123);"><BR>
G1<input type="checkbox" value="zxcdw" id="124" onclick="javascript:VerifyGroup('g1',124);"><BR>
G2<input type="checkbox" value="zxcf" id="125" onclick="javascript:VerifyGroup('g2',125);"><BR>
G2<input type="checkbox" value="zxcfg" id="126" onclick="javascript:VerifyGroup('g2',126);"><BR>
clear group
</body>
</html>
When you call ClearAllSelectionsA, if all the checkboxes are unchecked, then prodSel gets cleared. Then back in VerifyGroup, prodSel is immediately being reassigned to a. My recommendation would be to return true or false from ClearAllSelectionsA and act based upon that value.
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
var cleared = ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "" && !cleared) //only reset prodSel if there is a checkbox checked
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
return clre;
}
</script>

Check/Uncheck all checkboxes in a grid view

I am trying to implement the feature of checking and unchecking all checkboxes in a grid view at once. I created a main checkbox that will be used to check all the checkboxes at once
<input id="main-checkbox" type="checkbox" name="messages-checkall" value="all" checked="checked" onclick='checkedAll();'>
The checkedAll() function is implemeted as follows
<script type='text/javaScript'>
function checkedAll () {
var inputs = document.getElementsByTagName('input');
var checkboxes = [];
if (document.getElementById('main-checkbox').checked === "checked") {check = false} else {check = true};
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'checkbox') {
inputs[i].checked = check;
}
}
}
</script>
but this is not working.
Note - I cannot create a form with all the checkboxes and then handle all the checkboxes in the form.
Please tell if you want other detail.
Change
if (document.getElementById('main-checkbox').checked === "checked") {check = false} else {check = true};
To
var check = document.getElementById('main-checkbox').checked
var objCheckBoxes = document.getElementById('containerId').getElementsByTagName('input');
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
{
objCheckBoxes.checked = true/false;
}
else
{
for(var i = 0; i < countCheckBoxes; i++)
{
objCheckBoxes[i].checked = true/false;
}
}
In html
<ul id="containerId">
<li><input type="checkbox" name="selected" value="Some text description 1"></li>
<li><input type="checkbox" name="selected" value="Some text description 2"></li>
</ul>

Categories