Checked checkboxes

**unemployment** · Jan 29, 2011 17:41

**AllanP** · Jan 29, 2011 19:38

This script shows you how to test if a box is checked. It also uses the value of the checked box to enable an adjacent button. You should be able to modify this to meet your own needs.

Code :

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test if box is checked</title>
<script type="text/javascript">
<!--
// global reference to form
 var ff;    // global
// short ref to form
function shortCut() { ff=document.myForm; }
// ----------
// test if box checked and enable corresponding button 
 function testChecked()
  { var i; 
    for(i=0;i<ff.pmcheckbox.length;i++)
     {// looks at each checkbox to see if checked 
       if(ff.pmcheckbox[i].checked==true)
         {// if checked, disable corresponding button using checkbox value as ref to button in form 
           ff[ff.pmcheckbox[i].value].disabled=false;
           alert("Box "+ff.pmcheckbox[i].value+" is checked. Button enabled")
         }  
     } 
  }
// 
// ------------- 
//-->
</script>
<style type="text/css">
<!--
body      { font-family:arial,helvetica,sans-serif; font-size:13px; color:#00F; font-weight:bold; }
input     { margin-right:20px; }
#block1   { margin-bottom:20px; }
#block1 p { margin:5px; }
#myForm   { margin:50px 0px 0px 50px; width:250px; }
 
-->
</style>
</head>
 
<body onload="shortCut()">
 
<form name="myForm" id="myForm">
  <div id="block1">
    <p class="a"><input type="checkbox" name="pmcheckbox" value="B1"><input type="button" value="Button" name="B1" disabled></p>
    <p><input type="checkbox" name="pmcheckbox" value="B2"><input type="button" value="Button" name="B2" disabled></p>
    <p><input type="checkbox" name="pmcheckbox" value="B3"><input type="button" value="Button" name="B3" disabled></p>
    <p><input type="checkbox" name="pmcheckbox" value="B4"><input type="button" value="Button" name="B4" disabled></div>
  <!-- end block1 -->
  <p>
  <input type="button" onclick="testChecked()" value="Click to test if checked" name="aaa"></p>
  <p>Click browser refresh to start again</p>
</form>
<!-- end myForm -->
 
</body>
 
</html>

**unemployment** · Jan 29, 2011 20:46

Originally Posted by AllanP

This script shows you how to test if a box is checked. It also uses the value of the checked box to enable an adjacent button. You should be able to modify this to meet your own needs.

Code :

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test if box is checked</title>
<script type="text/javascript">
<!--
// global reference to form
 var ff;    // global
// short ref to form
function shortCut() { ff=document.myForm; }
// ----------
// test if box checked and enable corresponding button 
 function testChecked()
  { var i; 
    for(i=0;i<ff.pmcheckbox.length;i++)
     {// looks at each checkbox to see if checked 
       if(ff.pmcheckbox[i].checked==true)
         {// if checked, disable corresponding button using checkbox value as ref to button in form 
           ff[ff.pmcheckbox[i].value].disabled=false;
           alert("Box "+ff.pmcheckbox[i].value+" is checked. Button enabled")
         }  
     } 
  }
// 
// ------------- 
//-->
</script>
<style type="text/css">
<!--
body      { font-family:arial,helvetica,sans-serif; font-size:13px; color:#00F; font-weight:bold; }
input     { margin-right:20px; }
#block1   { margin-bottom:20px; }
#block1 p { margin:5px; }
#myForm   { margin:50px 0px 0px 50px; width:250px; }
 
-->
</style>
</head>
 
<body onload="shortCut()">
 
<form name="myForm" id="myForm">
  <div id="block1">
    <p class="a"><input type="checkbox" name="pmcheckbox" value="B1"><input type="button" value="Button" name="B1" disabled></p>
    <p><input type="checkbox" name="pmcheckbox" value="B2"><input type="button" value="Button" name="B2" disabled></p>
    <p><input type="checkbox" name="pmcheckbox" value="B3"><input type="button" value="Button" name="B3" disabled></p>
    <p><input type="checkbox" name="pmcheckbox" value="B4"><input type="button" value="Button" name="B4" disabled></div>
  <!-- end block1 -->
  <p>
  <input type="button" onclick="testChecked()" value="Click to test if checked" name="aaa"></p>
  <p>Click browser refresh to start again</p>
</form>
<!-- end myForm -->
 
</body>
 
</html>

I tried working in your suggestion... I decided to make my own function with some of your ideas in place. The function fails though. Do you know why?

Code JavaScript:

function selectone (pm) {
	var msg= document.getElementsByName('pm');
	var i =0;
 
	for(i; i < msg.length; i++)
	{
		if(msg.elements[i].checked === checked)
		{
			document.getElementById('multiple_action').disabled = false;
			document.getElementById('drop_button').setAttribute("class", "drop_button");
		}
		else
		{
			document.getElementById('multiple_action').disabled = true;
			document.getElementById('drop_button').setAttribute("class", "drop_button disabled");
		}
	}
}

**AllanP** · Jan 29, 2011 22:16

Originally Posted by unemployment

if(msg.elements[i].checked === checked)

This looks like it should be

if(msg.elements[i].checked == true)

**unemployment** · Jan 29, 2011 22:42

Nope, it still fails.

I get a firebug error saying that msg is undefined. New code is below I change to code in the for loop to include elements.

function selectone () {
var msg = document.getElementsByName('pm');
var i = 0;

for(i; i < msg.elements.length; i++)
{
if(msg.elements[i].checked == true)
{
document.getElementById('multiple_action').disabled = false;
document.getElementById('drop_button').setAttribute("class", "drop_button");
}
else
{
document.getElementById('multiple_action').disabled = true;
document.getElementById('drop_button').setAttribute("class", "drop_button disabled");
}
}
}

**AllanP** · Jan 29, 2011 23:21

[QUOTE=unemployment;4797043]
for(i; i < msg.elements.length; i++){ if(msg.elements[i].checked == true)/QUOTE]

It is the msg.elements that is giving you the problem. msg contains the object references to the elements named "pm". The correct syntax is:

for(i=0; i< msg.length; i++)
{ if(msg[i].checked == true)

**unemployment** · Jan 29, 2011 23:48

[QUOTE=AllanP;4797053]

Originally Posted by unemployment

for(i; i < msg.elements.length; i++){ if(msg.elements[i].checked == true)/QUOTE]

It is the msg.elements that is giving you the problem. msg contains the object references to the elements named "pm". The correct syntax is:

for(i=0; i< msg.length; i++)
{ if(msg[i].checked == true)

Ok... I made that change but now I am getting a new error from firebug.

Error: selectone is not defined

That doesn't make sense to me because in my code I have

Code PHP:

<td class="box_column"><label><input type="checkbox" name="pmcheckbox" onclick="selectone();" value="pm<?php echo $message['message_id']; ?>" /></label></td>

User Tag List

Thread: Checked checkboxes

Thread Tools

Display

Checked checkboxes

Bookmarks

Bookmarks

Posting Permissions