Test Checkbox Status

glenelkins · December 2, 2008

Hi

Im trying to detect upon click, if a checkbox is checked or unchecked, but my code isnt working :@

HTML:

<input type="checkbox" id="editsection[]" name="editsection[]" onClick="show_amendment ( 1 );" /> 1
<input type="checkbox" id="editsection[]" name="editsection[]" onClick="show_amendment ( 2 );" /> 2
<input type="checkbox" id="editsection[]" name="editsection[]" onClick="show_amendment ( 3 );" /> 3
<input type="checkbox" id="editsection[]" name="editsection[]" onClick="show_amendment ( 4 );" /> 4
<input type="checkbox" id="editsection[]" name="editsection[]" onClick="show_amendment ( 5 );" /> 5

JavaScript

function show_amendment ( id ) {

               /* IGNORE THESE 2 LINES THEY ARE FOR SOMETHING ELSE */
	document.getElementById ( 'amendmentinstructions[' + id + ']' ).style.display = '';
	document.getElementById ( 'instructions' ).style.display = '';
               /*********************************************/

               var ele = document.getElementById ( editsection[id] );

               if ( ele.checked == true ) {

                   alert ( "Checkbox " + id + " Is Checked" );

               }

}

KevinM1 · December 2, 2008

The problem is that you're trying to use an id like a name. Remember: id's are UNIQUE. Each element with an id should have a unique id. So, try something like:

HTML:

<input type="checkbox" id="editsection[1]" name="editsection[]" onclick="show_amendment(1);" />1

JavaScript:

function show_amendment(id)
{
   var ele = document.getElementById('editsection[' + id + ']');
   /* continue function */
}

glenelkins · December 2, 2008

ok ill give that a go.

Remember: id's are UNIQUE.

but the Ids should be unique as they are set as arrays with [] ??

KevinM1 · December 2, 2008

ok ill give that a go.

Remember: id's are UNIQUE.

but the Ids should be unique as they are set as arrays with [] ??

They're not set, though, as your markup has all the elements having an id of editsection[]. Again, you're confusing names with ids. When you do something like this:

var myCheckboxes = document.forms["myForm"].elements["editsection[]"];

You're accessing the checkboxes through their names and not their id's. And, in this example, all checkboxes with the name editsection[] are stored in the variable myCheckboxes as an array. Indeed, the same thing happens with PHP, which obtains $_GET and $_POST values by their names, and not their id's (which is why giving a group of checkboxes a name as an array works). Similarly, something like:

var myCheckboxes = document.getElementById('editsection[]');

Obtains only one checkbox element - the first one. Why? Because all of the boxes have the same id, so the function stops at the first match.

Try something like the following to see what I'm talking about in action:

<html>
<head>
   <title>Blah</title>
   <script type="text/javascript">
      window.onload = function()
      {
         var myCheckboxes = document.forms["myForm"].elements["editsection[]"];

         for(var i = 0; i < myCheckboxes.length; i++)
         {
            alert("Checkbox id: " + myCheckboxes[i].id);
            alert("Current checkbox: myCheckboxes[" + i + "]");
         }
      }
   </script>
</head>

<body>
   <form name="myForm" action="#" method="post">
      <input type="checkbox" id="editsection[]" name="editsection[]" /> 1
      <input type="checkbox" id="editsection[]" name="editsection[]" /> 2
      <input type="checkbox" id="editsection[]" name="editsection[]" /> 3
      <input type="checkbox" id="editsection[]" name="editsection[]" /> 4
      <input type="checkbox" id="editsection[]" name="editsection[]" /> 5
   </form>
</body>

</html>

glenelkins · December 2, 2008

ok i get what your saying. i didnt realise ids had to be completely unique...you learn something every day!

heres another one for you. the following AJAX is fine in FF. There are 2 functions but only the get_document() one seems to work in IE, but both fine in FF:

JAVASCRIPT

function create_ajax_object() {

	// Create request object
	try {

		// Firefox etc
		ajaxObj = new XMLHttpRequest();

	} catch ( e ) {

		// Ie
		try {

			ajaxObj = new ActiveXObject("Msxml2.XMLHTTP");

		} catch ( e ) {

			try {

				ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");

			} catch ( e ) {

				alert ( "Your Browser Does Not Support AJAX! You Cannot Continue");

			}

		}

	}

	return ( ajaxObj );

}

function get_document ( doc_id ) {

	var ajaxObj = create_ajax_object();

	if ( ajaxObj ) {

		ajaxObj.onreadystatechange = function() {

			if ( ajaxObj.readyState == '4' ) {

				var details = ajaxObj.responseText;

				details = details.split ( '&' );

				document.getElementById ( 'documenttitle' ).innerHTML = details[0];
				document.getElementById ( 'documentstyle' ).innerHTML = details[1];
				document.getElementById ( 'documentpdf' ).innerHTML = details[2];

			}

		}

	}
	ajaxObj.open ( 'GET', 'index.php?do=get_doc_info&id=' + doc_id, true );
	ajaxObj.send( null );

}

function get_address ( id, area ) {

	var ajaxObj = create_ajax_object();

	if ( ajaxObj ) {

		ajaxObj.onreadystatechange = function() {

			if ( ajaxObj.readyState == '4' ) {

				var response = ajaxObj.responseText;
				var addressarea = document.getElementById ( 'deliveryaddress' + area );

				response = response.split ( '&' );

				addressarea.innerHTML = response[0] + '<br />' + response[1] + '<br />' + response[2] + '<br />' + response[3] + '<br /><br />Quantity to here: <input type="text" name="quantitytohere[]" value="" style="width: 40px;" />';

			}

		}

	}
	ajaxObj.open ( 'GET', 'index.php?do=get_address&id=' + id, true );
	ajaxObj.send ( null );

}

HTML Code Of The get_address Call

<div style="float: left; width: 229px;">
    <div><strong>Delivery Address 1: </strong><select style="width: 80px;" name="deliveryaddress1" onChange="get_address ( this.options[this.selectedIndex].value, 1 );" /><option value="0">Please Select...</option>{offices}</select></div>
    <div style="margin-top: 15px;" id="deliveryaddress1"></div>
</div>                        
<div style="float: left; width: 233px;">
    <div><strong>Delivery Address 2: </strong><select style="width: 80px;" name="deliveryaddress2" onChange="get_address ( this.options[this.selectedIndex].value, 2 );" /><option value="0">Please Select...</option>{offices}</select></div>
    <div style="margin-top: 15px;" id="deliveryaddress2"></div>
</div>
<div style="float: left; width: 235px;">
    <div><strong>Delivery Address 3: </strong><select style="width: 80px;" name="deliveryaddress3" onChange="get_address ( this.options[this.selectedIndex].value, 3 );" /><option value="0">Please Select...</option>{offices}</select></div>
    <div style="margin-top: 15px;" id="deliveryaddress3"></div>
</div>
<div style="clear: both;"></div>

KevinM1 · December 2, 2008

Hmm...I'm not sure why it'd choke in IE. Nothing jumps out at me, although I must confess that when I have to use AJAX, I tend to rely on jQuery to do most of the heavy lifting for me. It saves on a ton of code, and just plain works.

glenelkins · December 2, 2008

why didnt i think of that? lol iv used jQuery for a few things.

cheers

Sign In

Test Checkbox Status

Recommended Posts

glenelkins

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

glenelkins

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

glenelkins

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

glenelkins

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information