Question

如果我在每个div中都有两个checkbox个复选框，我怎样才能找出点击了哪个<div id="num-1"> <input type="checkbox" name="check-1" value="check-1">Checkbox "check-1" of the Div "num-1" <br> </div> <div id="num-2"> <input type="checkbox" name="check-1" value="check-1">Checkbox "check-2" of the Div "num-2" <br> </div>？

＆＃13;

s = "..."

Set re = New RegExp
re.Pattern = "^[\s\S]*?Match: (.*)[\s\S]*"

WScript.Echo re.Replace(s, "$1")

＆＃13;

如果您建议使用JS （不是jQuery）的方法，我将不胜感激。

Answer 1

一种方法是使用事件委托和名称属性。一旦您的目标是复选框，您就可以访问此对象的任何内容，包括它的值，名称或是否已选中

<form class="someform">
<div id="num-1">
<input type="checkbox" name="check-1" value="check-1"> Checkbox "check-1" of the Div "num-1" <br>
</div>

<div id="num-2">
<input type="checkbox" name="check-2" value="check-1"> Checkbox "check-2" of the Div "num-2" <br>
</div>
</form>

<![CDATA[
.. your xml ..
]]>

Answer 2

这可以用不同的方式实现，我建议不要在循环中定义回调函数，因为这会定义它几次（在每次迭代中），所以你可以将它声明一次离开循环然后附加点击使用addEventListener()属性name使用事件委派check-1对复选框进行（或更改）事件：

var checkboxes = document.getElementsByName('check-1');

for(var i=0;i<checkboxes.length;i++){
  checkboxes[i].addEventListener('click', getParent);
  //checkboxes[i].addEventListener('change', getParent);
}

然后，您必须定义每次用户click/change复选框（我的示例中为getParent()）时都会触发的函数，并且在此函数内部您可以使用.parentNode method plus { {1}}获取父div的.id属性：

id

function getParent(){
  alert(this.parentNode.id);
}

var checkboxes = document.getElementsByName('check-1');

for(var i=0;i<checkboxes.length;i++){
  checkboxes[i].addEventListener('click', getParent);
}

function getParent(){
  alert(this.parentNode.id);
}

Answer 3

使用jQuery（虽然没有标记！）

将.closest与Attribute Starts With Selector

一起使用

$('[type="checkbox"][name^="check-"]').on('change', function() {
  console.log($(this).closest('div[id^="num-"]').get(0));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="num-1">
  <input type="checkbox" name="check-1" value="check-1">Checkbox "check-1" of the Div "num-1"
  <br>
</div>

<div id="num-2">
  <input type="checkbox" name="check-1" value="check-1">Checkbox "check-2" of the Div "num-2"
  <br>
</div>

使用VanillaJS

使用document.querySelectorAll选择type="checkbox"元素
使用[].foreach.call来迭代array-like对象（具有length属性）
使用addEventListener附加change活动
Element.parentNode将返回当前元素的parent-element

var elems = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(elems, function(el) {
  el.addEventListener('change', function() {
    console.log(this.parentNode);
  });
});

<div id="num-1">
  <input type="checkbox" name="check-1" value="check-1">Checkbox "check-1" of the Div "num-1"
  <br>
</div>

<div id="num-2">
  <input type="checkbox" name="check-1" value="check-1">Checkbox "check-2" of the Div "num-2"
  <br>
</div>

Answer 4

您可以使用点击复选框的parentElement属性，如下所示：

function detectDiv(obj) {
  var parent = obj.parentElement;
  console.log(parent.id);
}

<div id="num-1">
<input type="checkbox" name="check-1" value="check-1" onclick="detectDiv(this)"> Checkbox "check-1" of the Div "num-1" <br>
</div>

<div id="num-2">
<input type="checkbox" name="check-1" value="check-1" onclick="detectDiv(this)"> Checkbox "check-2" of the Div "num-2" <br>
</div>

Answer 5

您可以使用querySelectorAll()和for循环并返回parentNode div

＆＃13;

var inputs = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', function() {
    console.log(this.parentNode.id);
  })
}

＆＃13;

<div id="num-1">
  <input type="checkbox" name="check-1" value="check-1">Checkbox "check-1" of the Div "num-1"
  <br>
</div>

<div id="num-2">
  <input type="checkbox" name="check-1" value="check-1">Checkbox "check-2" of the Div "num-2"
  <br>
</div>

＆＃13;

Answer 6

你可以添加一个点击或更改处理程序，它将复选框作为参数，然后导航到父节点。

示例：

function checkboxChange(checkbox) {
    console.log(checkbox.parentNode.id);
}

HTML：

<div id="num-1">
<input type="checkbox" name="check-1" value="check-1" onchange="checkboxChange(this)"> Checkbox "check-1" of the Div "num-1" <br>
</div>

<div id="num-2">
<input type="checkbox" name="check-1" value="check-1" onchange="checkboxChange(this)"> Checkbox "check-2" of the Div "num-2" <br>
</div>

Answer 7

假设您在所有<div> #num-x周围都有<div>，您可以使用事件委派来确定单击了哪个复选框，然后获取其父级：

document.getElementById("num-container").addEventListener("click", function(e){
  if(e.target.type == "checkbox"){
    console.log("Parent div:", e.target.parentNode, "Checked?", e.target.checked);
  }
});

<div id="num-container">
  <div id="num-1">
    <input type="checkbox" name="check-1" value="check-1">Checkbox "check-1" of the Div "num-1"
    <br>
  </div>

  <div id="num-2">
    <input type="checkbox" name="check-1" value="check-1">Checkbox "check-2" of the Div "num-2"
    <br>
  </div>
</div>

Answer 8

以下示例将在单击时记录每个输入的id值。

var inputs = document.querySelectorAll('input');

Array.prototype.forEach.call(inputs, function(input) {
  input.addEventListener('click', findParent);
});

function findParent() {
  console.log(this.parentNode.id);
}

<div id="num-1">
  <input type="checkbox" name="check-1" value="check-1">Checkbox "check-1" of the Div "num-1"
  <br>
</div>

<div id="num-2">
  <input type="checkbox" name="check-1" value="check-1">Checkbox "check-2" of the Div "num-2"
  <br>
</div>

逐步分解......

首先使用querySelectorAll并传入输入选择器以获取nodeList中的所有所需输入。我们会将此保存到var inputs。

（我的建议是，如果您控制了您的标记，则为每个输入使用共享类，这样您就不会定位所有输入）

然后通过调用inputs Array prototype of forEach上的nodeList来遍历每个节点，这允许您遍历每个节点（输入）。在迭代中，您向输入添加eventListener并发出回调函数以在调度事件时触发。

在回调函数中，定位输入的parentNode，它返回DOM中的第一个升序节点。最后，要获取输入的ID，只需使用.id。

Answer 9

这是一个纯JavaScript解决方案：

// HTML code 
<div id="num-1">
<input type="checkbox" name="check-1" value="check-1"> Checkbox "check-1" of the Div "num-1" <br>
</div>

<div id="num-2">
    <input type="checkbox" name="check-1" value="check-1">Checkbox "check-2" of the Div "num-2"
    <br>
  </div>

// javascript code 
checkboxes = document.querySelectorAll('input[type="checkbox"]');

for(var i=0;i < checkboxes.length;i++){
  // add event listener for each input element
  checkboxes[i].addEventListener('change',function(e){
    console.log(this.parentElement); // will log the direct parent
  });
}

获取使用javascript单击div的复选框？

9 个答案: