How to pass div id from checkbox as parameter to onclick method?

Question

• There are a number of divs. Each div has group of checkboxes.
  
• All checkboxes have same onClick event handling.
  

• The name of checkboxes depend upon div-id.
  Hence I need to send div id as a parameter while calling onClick function. Is there any way we could send id of div while calling onClick function? The code is as follows:
  

  <form name="formName">
      <div id="groupA">
          GroupA checkbox list: <br>
          <input type='checkbox' name='groupA[]' value='Val1' onclick="onClickFunction(name)">Val1<br>
          <input type='checkbox' name='groupA[]' value='Val2' onclick="onClickFunction(name)">Val2<br>
          <input type='checkbox' name='groupA[]' value='Val3' onclick="onClickFunction(name)" checked>Val3<br>
          <input type='checkbox' name='select_all_groupA' value='All' onclick="onClickFunction(name)" checked>All<br>
      </div>
  
      <div id="groupB">
          GroupB checkbox list: <br>
          <input type='checkbox' name='groupB[]' value='ValX' onclick="onClickFunction(name)">ValX<br>
          <input type='checkbox' name='groupB[]' value='ValY' onclick="onClickFunction(name)" checked>ValY<br>
          <input type='checkbox' name='select_all_groupB' value='All' onclick="onClickFunction(name)" checked>All<br>
      </div>
  </form>
  

How can this be achieved? Thank you.

Answer 1

If the intention is to get the parent details, the other way around is to check the parent node of event target from the event Handler.

function clickHandler(event){
  var targetElement = event.target;
  var id =  targetElement.parentNode.id;
}

// in Jquery way

function clickHandler(event){

  var divId =  $( event.target ).parent().attr("id");
}

Answer 2

use this.parentNode.id

<input type='checkbox' name='groupA[]' value='Val1' onclick="onClickFunction(this.name,this.parentNode.id)">Val1<br>

function onClickFunction(name,parentId){
console.log(name)
console.log(parentId)
}

<form name="formName">
    <div id="groupA">
        GroupA checkbox list: <br>
        <input type='checkbox' name='groupA[]' value='Val1' onclick="onClickFunction(this.name,this.parentNode.id)">Val1<br>
        <input type='checkbox' name='groupA[]' value='Val2' onclick="onClickFunction(this.name,this.parentNode.id)">Val2<br>
        <input type='checkbox' name='groupA[]' value='Val3' onclick="onClickFunction(this.name,this.parentNode.id)" checked>Val3<br>
        <input type='checkbox' name='select_all_groupA' value='All' onclick="onClickFunction(this.name,this.parentNode.id)" checked>All<br>
    </div>

    <div id="groupB">
        GroupB checkbox list: <br>
        <input type='checkbox' name='groupB[]' value='ValX' onclick="onClickFunction(this.name,this.parentNode.id)">ValX<br>
        <input type='checkbox' name='groupB[]' value='ValY' onclick="onClickFunction(this.name,this.parentNode.id)" checked>ValY<br>
        <input type='checkbox' name='select_all_groupB' value='All' onclick="onClickFunction(this.name,this.parentNode.id)" checked>All<br>
    </div>
</form>

A better approach :

function onClickFunction() {
  var name = this.name;
  var parentId = this.parentNode.id;
  //your code
}

<form name="formName">
  <div id="groupA">
    GroupA checkbox list:
    <br>
    <input type='checkbox' name='groupA[]' value='Val1' onclick="onClickFunction()">Val1
    <br>
    <input type='checkbox' name='groupA[]' value='Val2' onclick="onClickFunction()">Val2
    <br>
    <input type='checkbox' name='groupA[]' value='Val3' onclick="onClickFunction()" checked>Val3
    <br>
    <input type='checkbox' name='select_all_groupA' value='All' onclick="onClickFunction()" checked>All
    <br>
  </div>

  <div id="groupB">
    GroupB checkbox list:
    <br>
    <input type='checkbox' name='groupB[]' value='ValX' onclick="onClickFunction()">ValX
    <br>
    <input type='checkbox' name='groupB[]' value='ValY' onclick="onClickFunction()" checked>ValY
    <br>
    <input type='checkbox' name='select_all_groupB' value='All' onclick="onClickFunction()" checked>All
    <br>
  </div>
</form>