How to check all the checkboxes by using JavaScript?
Let me know if you are having anyway to check all the javascript code to select all checkboxes by using while...loop.
The below mentioned code is placed on the header on top of yours page 1
Code:
<SCRIPT LANGUAGE="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 ;
}
</script>
The below mentioned code can display checkboxes which are included in the page 2
Code:
echo "<a class='comp' onclick='singleHideandShow({$row['pr_id']})' style='cursor ointer'>{$row['propname']}</a><p>";
$propqry = mysql_query("SELECT * FROM users WHERE propid={$row['pr_id']}");
//using the hide and show id number, once clicked it will display the below contents
echo "<div id={$row['pr_id']} style='display:none;'>";
while($propf = mysql_fetch_assoc($propqry)) {
if($propf['uactive'] == "yes") {
$pactive = "active";
} else {
$pactive = "deactivated";
}
//displays the information from the DB with a checkbox
echo "<form name='myform' id='formmsg' method='post' action='profile.php?paction=edit&find=none' >";
echo " <input type='checkbox' name='check_list' value='{$propf['us_id']}'> <a href='profile.php?paction=edit&pid={$propf['us_id']}' /><img src='../images/secure/edit.png' name='Edit' border='0' /></a> <a href='profile.php?paction=delete&pid={$propf['us_id']}' /><img src='../images/secure/delete.png' name='Delete' border='0' /></a><label class='cuser'> {$propf['fname']} {$propf['lname']}, ({$propf['uname']}), {$pactive}</label><br>";
}
echo "</form>";
echo '<p><input type="button" name="Check_All" value="Check All" onClick="CheckAll(document.myform.check_list)"> <input type="button" name="Un_CheckAll" value="Uncheck All" onClick="UnCheckAll(document.myform.check_list)"> <p>';
echo "</div>";
as I am clicking on the Check All button it is prompting with an error message.
Quote:
Message: 'length' is null or not an object
Line: 15
Char: 13
Code: 0
any help on this particular matter will be highly appreciated.
Re: How to check all the checkboxes by using JavaScript?
There is no need of having 2 functions rather than that of single function need to check or uncheck all the checkboxes of yours.
Code:
<body>
<input type="checkbox" name="chk1" value="val1" class="chkAll" /><br />
<input type="checkbox" name="chk2" value="val2" class="chkAll" /><br />
<input type="checkbox" name="chk3" value="val3" class="chkAll" /><br />
<input type="checkbox" name="chk4" value="val4" class="chkAll" /><br />
<input type="checkbox" name="chk5" value="val5" class="chkAll" /><br />
<label for="chkSelAll">Select all</label><input type="checkbox" id="chkSelAll" />
<script type="text/javascript">
var chkAllOA = document.getElementsByClassName('chkAll');
document.getElementById('chkSelAll').onclick=function(){
for(i=0; i<chkAllOA.length; i++){
chkAllOA[i].checked = this.checked;
}
}
</script>
</body>
Or if you wanted a button which will let you check/uncheck all of your checkboxes then you will need 1 button and 1 function.
Code:
<body>
<input type="checkbox" name="chk1" value="val1" class="chkAll" /><br />
<input type="checkbox" name="chk2" value="val2" class="chkAll" /><br />
<input type="checkbox" name="chk3" value="val3" class="chkAll" /><br />
<input type="checkbox" name="chk4" value="val4" class="chkAll" /><br />
<input type="checkbox" name="chk5" value="val5" class="chkAll" /><br />
<input type="button" id="btnSelAll" value="Select all" />
<script type="text/javascript">
var chkAllOA = document.getElementsByClassName('chkAll');
var btnSelAll = document.getElementById('btnSelAll');
btnSelAll.checked = false;
btnSelAll.onclick=function(){
this.checked = (this.checked)? false : true;
this.value = (this.checked)? 'Uncheck all' : 'Check all';
for(i=0; i<chkAllOA.length; i++){
chkAllOA[i].checked = this.checked;
}
}
</script>
</body>
Re: How to check all the checkboxes by using JavaScript?
If it does not work for you then you can also try below mentioned code. It is working with all the browsers.
Code:
<html>
<head>
<title>Toggle Checkboxes</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name = "myform" action='#'>
<input name = "myname" type = "checkbox" value = "Red"> RED <br>
<input name = "myname" type = "checkbox" value = "Blue"> BLUE <br>
<input name = "myname" type = "checkbox" value = "White"> WHITE <br>
<input name = "myname" type = "checkbox" value = "Green"> GREEN <br>
<input name = "myname" type = "checkbox" value = "Yellow"> YELLOW<br><br>
<input type = "radio" name = "toggle" onclick = "cboxToggle(myname, !this.checked)">UNCHECK ALL<br>
<input type = "radio" name = "toggle" onclick = "cboxToggle(myname, this.checked)">CHECK ALL<br><br>
<input type = "button" value = " CHECK ALL" onclick = "cboxToggle(myname, !this.checked)"><br>
<input type = "button" value = " UNCHECK ALL" onclick = "cboxToggle(myname, this.checked)"><br>
<input type = "button" value = "CHECK/UNCHECK ALL" onclick = "toggleAll(myname)"<br>
</form>
<script type = "text/javascript">
function cboxToggle(group, action) {
for( var i=0, len = group.length; i < len; i++) {
group[i].checked = action;
}
}
var count = 0;
function toggleAll(group) {
if (count == 0) {
for (var i=0, len = group.length; i < len; i++) {
group[i].checked = true;
count = 1;
}
}
else {
for (var i=0, len = group.length; i < len; i++) {
group[i].checked = false;
count = 0;
}
}
}
</script>
</body>
All the browsers are having support for document.getElementById(). The previous version of IE9 are not having support for document.getElementsByClassName(). There is no need of having multiple buttons/links or function to select or deselect all. the only one link/button and one function. Only you should check out whether browser which you are having support for document.getElementsByClassName() or not.
Re: How to check all the checkboxes by using JavaScript?
Normally giving a same name to the checkboxes is not a good practice. If the form data is going to use in the php script then they are not corrected. same name is given to the group of radio buttons. I think you are not aware of the thing that every single HTML page should have valid doctype. As far as I know the IE will get into quirksmode when it is not able to get doctype and it causes the issue. I don’t know whether document.getElementsByClassName() is being supported on the IE8.
Re: How to check all the checkboxes by using JavaScript?
In general situation when you are supposed to output data from the database row and adding the same into the checkboxes at the end of every single row is selected or deselected. According to me checkbox would offer much more than that of separate containers and getElementsByTagName() will not be useful. To get maintenance and flexibility the best thing which I can suggest you that you should create a class for the desired checkboxes and collect the same by the class names by using JavaScript. Once you have given a class name you can placed them anywhere on the web page and there will not be any need to make any changes on the JavaScript. Also there will not be any issue if you don’t use any other elements such as <form>.
Re: How to check all the checkboxes by using JavaScript?
According to me the thing which you are looking for is bit simple to do. you should use below mentioned code.
Code:
<form action="deleteUsers.php" method="post">
<div>
<input type="checkbox" name="delUsers[]" value='id1'/>User 1<br />
<input type="checkbox" name="delUsers[]" value='id2' />User 2<br />
<input type="checkbox" name="delUsers[]" value='id3' />User 3<br />
<input type="checkbox" onclick="selectAll(this)" />(un)check all<br />
<input type="submit" value="Delete users" />
</div>
</form>
<script>
function selectAll(elem){
var chkboxes = document.getElementsByName('delUsers[]');
for(i=0; i<chkboxes.length; i++){
chkboxes[i].checked = elem.checked;
}
}
</script>
After that you should build a query into the deleteUsers.php where you will be able to build your query so that you can process the passed userID by using below mentioned command.
Code:
<?php
if(isset($_POST['delUsers'])){
$str = implode(',',$_POST['delUsers']);
$query = 'delete from users where userID in('.$str.')';
echo $query;
//if all users were selected $query is
//delete from users where userID in(id1,id2,id3)
}
?>
If the user IDs are string then you should simply wrap them into $query.
Re: How to check all the checkboxes by using JavaScript?
You can use below mentioned code to pass the javascript code to javascript function which would let you know about select on unselect. Let me know whether it was useful to you.
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mydiv1">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/><br>
check all<input type="checkbox" onclick="checkedAll(this.checked,'mydiv1')"/>
</div>
<div id="mydiv2">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/><br>
check all<input type="checkbox" onclick="checkedAll(this.checked,'mydiv2')"/>
</div>
<script type="text/javascript">
function checkedAll (boxchecked,thediv) {
var els = document.getElementById(thediv).getElementsByTagName("input");
var len = els.length;
for (var i = 0; i < len; i++) {
els[i].checked = boxchecked;
}
}
</script>
</body>
</html>
