Question

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.

Answer 1

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>