help with checking/unselecting with single checkbox

Question

azegurb 1 Posting Whiz in Training

13 Years Ago

hi i have created function that automatically adds rows with chekcboxes. i can create two button that one serves checking all checkboxes and the another one serves for unchecking rows. but i would like to check/uncheck all checkboxes with single checkbox.
then i have created checkbox for the purpose to check or uncheck all checkboxes. but it neigther checks nor unchecks all
here is script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var a=0;
function add(){
	a++;
	
	
	var cedvel=document.getElementById("tab");
	
	
	if(a>cedvel.rows.length){
		
		a=cedvel.rows.length;
		
		}
		
	
		
	var sira=cedvel.insertRow(a);
	
	var isare=sira.insertCell(0);
	var solteref=sira.insertCell(1);
	var sagteref=sira.insertCell(2);
	
	var birinci=document.createElement('input');
	birinci.type='checkbox';
	isare.appendChild(birinci);
	
	solteref.innerHTML=a+1;
	
	var ucuncu=document.createElement('input');
	ucuncu.type="text";
	ucuncu.size="11";
	sagteref.appendChild(ucuncu);
	
	}

function del(){
	var cedvel=document.getElementById("tab");
	var a=cedvel.rows.length;
	for(i=0; i<a; i++){
		
		var komp=cedvel.rows[i].cells[0].childNodes[0];
		if(komp.checked==true){
			
			cedvel.deleteRow(i);
			a--;
			i--;
			
			}
		if(i>=0)
		cedvel.rows[i].cells[1].childNodes[0].nodeValue=i+1
		}
	
}

function checkall(){
	var sec=document.getElementById("tab");
	for(i=0; i<sec.rows.length; i++){
		
		sec.rows[i].cells[0].childNodes[0].checked=true;
		
		}
	
	
	
	}

function uncheckall(){
var sec=document.getElementById("tab");
	for(i=0; i<sec.rows.length; i++){
		
		sec.rows[i].cells[0].childNodes[0].checked=false;
		
		}
	
}
var checked=1;
function all(){
	var sec=document.getElementById("tab");
	for(i=0; i<sec.rows.length; i++){
		if(checked==1){
		sec.rows[i].cells[0].childNodes[0].checked=true;
		checked=2;
		}
		if(checked==2){
		sec.rows[i].cells[0].childNodes[0].checked=false;
		checked=1;	
			
		}
		}
	
	
	
	}





</script>

	





</head>

<body bgcolor="#999999">
&nbsp<input type="checkbox" onclick="all()"  value="check/uncheckall" id="box"/>check/uncheck all
<table  id="tab" style="font-family:'Comic Sans MS', cursive">
<tr><td><input type="checkbox" /></td><td>1</td><td><input type="text" size="11" /></td></tr>
</table>
<input type="button" value="add" onclick="add()"  style="font-family:'Comic Sans MS', cursive"/><br />
<input type="button" value="delete" onclick="del()" style="font-family:'Comic Sans MS', cursive"/>
<input type="button" value="uncheckall" onclick="uncheckall()" style="font-family:'Comic Sans MS', cursive" /><br />
<input type="button" value="checkall" onclick="checkall()" style="font-family:'Comic Sans MS', cursive" /><br />


</body>
</html>

Thanks in advance for attention

javascript

2 Contributors
4 Replies
120 Views
6 Days Discussion Span
Latest Post 13 Years Ago Latest Post by azegurb

SolidSolutions 13 Junior Poster

13 Years Ago

This should do the trick:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var a=0;
function add(){
	a++;
	
	
	var cedvel=document.getElementById("tab");
	
	
	if(a>cedvel.rows.length){
		
		a=cedvel.rows.length;
		
		}
		
	
		
	var sira=cedvel.insertRow(a);
	
	var isare=sira.insertCell(0);
	var solteref=sira.insertCell(1);
	var sagteref=sira.insertCell(2);
	
	var birinci=document.createElement('input');
	birinci.type='checkbox';
	isare.appendChild(birinci);
	
	solteref.innerHTML=a+1;
	
	var ucuncu=document.createElement('input');
	ucuncu.type="text";
	ucuncu.size="11";
	sagteref.appendChild(ucuncu);
	
	}

function del(){
	var cedvel=document.getElementById("tab");
	var a=cedvel.rows.length;
	for(i=0; i<a; i++){
		
		var komp=cedvel.rows[i].cells[0].childNodes[0];
		if(komp.checked==true){
			
			cedvel.deleteRow(i);
			a--;
			i--;
			
			}
		if(i>=0)
		cedvel.rows[i].cells[1].childNodes[0].nodeValue=i+1
		}
	
}

function checkall(){
	var sec=document.getElementById("tab");
	for(i=0; i<sec.rows.length; i++){
		
		sec.rows[i].cells[0].childNodes[0].checked=true;
		
		}
	
	
	
	}

function uncheckall(){
var sec=document.getElementById("tab");
	for(i=0; i<sec.rows.length; i++){
		
		sec.rows[i].cells[0].childNodes[0].checked=false;
		
		}
	
}

function all(){
	if(document.getElementById("box").checked){
		checkall();
	}
	else{
		uncheckall();
	}
}






</script>

	





</head>

<body bgcolor="#999999">
&nbsp;<input type="checkbox" onclick="all();"  value="check/uncheckall" id="box"/>check/uncheck all
<table  id="tab" style="font-family:'Comic Sans MS', cursive">
<tr><td><input type="checkbox" /></td><td>1</td><td><input type="text" size="11" /></td></tr>
</table>
<input type="button" value="add" onclick="add()"  style="font-family:'Comic Sans MS', cursive"/><br />
<input type="button" value="delete" onclick="del()" style="font-family:'Comic Sans MS', cursive"/>
<input type="button" value="uncheckall" onclick="uncheckall()" style="font-family:'Comic Sans MS', cursive" /><br />
<input type="button" value="checkall" onclick="checkall()" style="font-family:'Comic Sans MS', cursive" /><br />


</body>
</html>

Edited 13 Years Ago by SolidSolutions because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

azegurb 1 Posting Whiz in Training · Answer 1 · 2011-02-05T12:23:53+00:00

I tried the function you wrote. but also doesnt work

SolidSolutions 13 Junior Poster · Answer 2 · 2011-02-07T19:26:01+00:00

Yes, well I did not check IE functionality. It appears there was a problem/conflict in the function name. I'd highly recommend testing your code in FF and IE and using the error reporting to help you figure things out...it also allows you to share more information when you request help like if it is having a problem in FF, IE or both (or other browsers too if you'd like).

At any rate, try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var a=0;
function add(){
	a++;
	
	var cedvel=document.getElementById("tab");
	
	if(a>cedvel.rows.length){
	
		a=cedvel.rows.length;
		
		}
		
	var sira=cedvel.insertRow(a);
	
	var isare=sira.insertCell(0);
	var solteref=sira.insertCell(1);
	var sagteref=sira.insertCell(2);
	
	var birinci=document.createElement('input');
	birinci.type='checkbox';
	isare.appendChild(birinci);
	
	solteref.innerHTML=a+1;
	
	var ucuncu=document.createElement('input');
	ucuncu.type="text";
	ucuncu.size="11";
	sagteref.appendChild(ucuncu);
	
	}

function del(){
	var cedvel=document.getElementById("tab");
	var a=cedvel.rows.length;
	for(i=0; i<a; i++){
		
		var komp=cedvel.rows[i].cells[0].childNodes[0];
		if(komp.checked==true){
			
			cedvel.deleteRow(i);
			a--;
			i--;
			
			}
		if(i>=0)
		cedvel.rows[i].cells[1].childNodes[0].nodeValue=i+1
		}
}

function checkall(){
	var sec=document.getElementById("tab");
	for(i=0; i<sec.rows.length; i++){
		
		sec.rows[i].cells[0].childNodes[0].checked=true;
		
		}
	
	}

function uncheckall(){
var sec=document.getElementById("tab");
	for(i=0; i<sec.rows.length; i++){
		
		sec.rows[i].cells[0].childNodes[0].checked=false;
		
		}
}

function changeAll(){
	if(document.getElementById("box").checked){
		checkall();
	}
	else{
		uncheckall();
	}
}

</script>

</head>

<body bgcolor="#999999">&nbsp;


<input type="checkbox" onclick="changeAll();"  value="check/uncheckall" id="box"/>check/uncheck all
<table  id="tab" style="font-family:'Comic Sans MS', cursive">
<tr><td><input type="checkbox" /></td><td>1</td><td><input type="text" size="11" /></td></tr>
</table>
<input type="button" value="add" onclick="add()"  style="font-family:'Comic Sans MS', cursive"/><br />
<input type="button" value="delete" onclick="del()" style="font-family:'Comic Sans MS', cursive"/>
<input type="button" value="uncheckall" onclick="uncheckall()" style="font-family:'Comic Sans MS', cursive" /><br />
<input type="button" value="checkall" onclick="checkall()" style="font-family:'Comic Sans MS', cursive" /><br />


</body>
</html>

azegurb 1 Posting Whiz in Training · Answer 3 · 2011-02-08T20:55:27+00:00

azegurb 1 Posting Whiz in Training

13 Years Ago

Thank you very much