Question

有很多div。每个div都有一组复选框。
所有复选框都具有相同的onClick事件处理。

复选框的名称取决于div-id 因此我需要在调用onClick函数时将div id作为参数发送。有没有什么办法可以在调用onClick函数时发送div的id？代码如下：

<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>

如何实现这一目标？谢谢。

Answer 1

如果目的是获取父详细信息，那么另一种方法是从事件处理程序检查事件目标的父节点。

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

使用let camera = GMSCameraPosition.cameraWithLatitude(51.48, longitude: 0, zoom: 10) mapView.camera = camera

this.parentNode.id

＆＃13;

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

＆＃13;

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

＆＃13;

更好的方法：

＆＃13;

<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>

＆＃13;

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

＆＃13;

如何将复选框中的div id作为参数传递给onclick方法？

2 个答案: