What is JavaScript unselect command for a Checkbox input?

Hello,

To call a JavaScript function when a Checkbox is selected we are using:

onclick=“set_border_red(‘<?php echo $cat_id; ?>’);”

My question is, what is the opposite of this function?
That is what is the JavaScript call when a Checkbox is unselected?
So that we can call a suitable function when a selected Checkbox is unselected?

so you would think this would be the JavaScript unselect command:

on-unselect=“set_border_off(‘<?php echo $cat_id; ?>’);”

but alas there is no JS command as such!
So what is the JS command for when a Checkbox is unselected?

Thanks.
Dean

chkBx.id.checked = false; will programmatically uncheck a checkbox.

chkBx.id.checked == false; checks to see if the checkbox is unchecked.

chkBx.id.checked == true; check to see if the checkbox is checked.

(How much check could a checkbox check if a checkbox could check checks.)

But how I am going to call this JS function from inside the HTML input tag?

To be exact the input tag currently is like:

<input type=“checkbox” name=“cats” value=“<?php echo $cat_id; ?>” <?php echo $selected; ?> onclick=“set_border_red(‘<?php echo $cat_id; ?>’);”>

so we have the JS handler in there for when the checkebox is selected?

what is the opposite JS handler for when the checkebox is unselected? That is the Question.

You ARE calling it from within the onclick. I’d have to see your “set_border_red” function. You’re passing the ID, it looks like. The function should check the checked status and set the border based upon that.

if(document.getElementById(cbxID).checked == true) {// it’s checked
if(document.getElementById(cbxID).checked == false) {// it’s not checked

Hi,

That function set_border_red currently is as follows:

function set_border_red (item)
{
document.getElementById(item).style.border = ‘red 2px solid’;
}

Thanks.

Try this:


function set_border_red (item)
{
if(document.getElementById(item).checked == true)
  {
   	document.getElementById(item).style.border = '2px solid red';
  }
else
  {
  document.getElementById(item).style.border = '2px solid transparent';
  }
}

Hi,

This is not working!
That is after I replace function set_border_red with above Code of yours now the border is not set to Red upon a checkbox being selected!

!!!

Hey,

I got this working as desired.
By changing your code suggestion to:

if  (document.getElementById(item).style.border == '1px solid transparent')	{
   	  document.getElementById(item).style.border = '2px solid red';
} else  {
	  document.getElementById(item).style.border = '1px solid transparent';
}

and setting the default stat of the style border to be: ‘1px solid transparent’

Not exactly the solution I was looking for but it works as desired which is what matters :slight_smile:

Thanks.

The following works in IE10… not sure why it isn’t working in FF:


<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript">
function set_border_red (item)
{ 

if(document.getElementById(item).checked == true)
  {
       document.getElementById(item).style.border = '2px solid red';
  }
else
  {
  document.getElementById(item).style.border = '2px solid transparent';
  }
}
    </script>
</head>

<body>
<input type="checkbox" name="chkbx_1" id="chkbx_1" value="1" onclick="set_border_red(this.id);" style="border:2px solid transparent;" />
<input type="checkbox" name="chkbx_2" id="chkbx_2" value="2" onclick="set_border_red(this.id);" style="border:2px solid transparent;" />
<input type="checkbox" name="chkbx_3" id="chkbx_3" value="3" onclick="set_border_red(this.id);" style="border:2px solid transparent;" />
</body>

</html>

Are you using

onclick="set_border_red([COLOR=#ff0000][B]this.id[/B][/COLOR]);"

No.
The id sent is the id of the DIV that is around this input.
So are you saying that reason that that code did not work is because we need to include an id in each Input tag and send that for being checked?
I see your point.

Yes… the element that you are trying to style is the ID that needs to be passed to the function. You could do div.child, but that would be an extra step.

My hair used to hide that. :smiley:

With:

if(document.getElementById(item).checked == true)

You either have an = missing

if(document.getElementById(item).checked === true)

or have unnecessary characters on the end of the test

if(document.getElementById(item).checked)

Thesing == true is pointless as the value you are comparing it to will be converted to true or false if you omit that comparison. Only if you don’t want the other value converted to true or false and want to test if it is alreeady true or false is it worth comparing it to true and then you need === in order to do an exact comparison without a conversion.

Similarly == false is also pointless as you can achieve the same result using ! on the front of the other value instead.

Conversely, one could use the following to force it to a boolean true.
if(!!document.getElementById(item).checked)