I have a checkbox, that is styled using onclick handler.

The issue I have is , I also want to fire a div simultaneously.. to display hidden message.

Kind of like: checkbox ( tick to go featured )

If ticked show featured div, else hide.

Code I have is:

<span id="checkboxWrap" class="styledCheckboxWrap"><input name="include" type="checkbox" id="checkbox" onclick="setCheckboxDisplay(this)" class="styledCheckbox" /></span>

Wanted to also fire the div like...:

onClick="toggle('feature');"

Can I chain onClick events to one click handler?

ie..

onclick="setCheckboxDisplay(this);toggle('feature');"

Or am I going round in circles.

I have a checkbox, that is styled using onclick handler.

The issue I have is , I also want to fire a div simultaneously.. to display hidden message.

Kind of like: checkbox ( tick to go featured )

If ticked show featured div, else hide.

Code I have is:

<span id="checkboxWrap" class="styledCheckboxWrap"><input name="include" type="checkbox" id="checkbox" onclick="setCheckboxDisplay(this)" class="styledCheckbox" /></span>

Wanted to also fire the div like...:

onClick="toggle('feature');"

Can I chain onClick events to one click handler?

ie..

onclick="setCheckboxDisplay(this);toggle('feature');"

Or am I going round in circles.

• javascript
• jquery

• you know I havent tried it lol, I just typed that as an example.... will give it a whirl – 422 Commented Jun 18, 2011 at 1:37

4 Answers 4

Use event listeners. They're better anyway. :)

var check = document.getElementById('checkbox');

check.addEventListener('click', function () {
    setCheckboxDisplay(this);
});

check.addEventListener('click', function () {
    toggle('feature');
});

Ideally, you should try to start using unobstrusive javascript which basically means you separate the structure from function by moving your javascript inside a <script> tag or into a separate file. So your code would look like this and make it easier to read.

HTML

<span id="checkboxWrap" class="styledCheckboxWrap">
  <input name="include" type="checkbox" id="checkbox" class="styledCheckbox" />
</span>

Script

<script>
$(function(){
  $('.styledCheckbox').click(function(){
    setCheckboxDisplay(this);
    toggle('feature');
  });
});
</script>

Yes, you can call multiple statements in the onclick attribute as long as they are semicolon-delimited. That gets unweildy though, so I'll usually define a new function to wrap the two into one call.

Just delegate this to a function that does all your work...

// Somewhere in the head of the file...
function doOnClickStuff(target) {
    toggle('feature');
    setCheckboxDisplay(target);
}

And then just have the onClick handler invoke that...

onClick="doOnClickStuff(target);"