如何获取特定复选框的位置编号

Question

我有一个由 JS 制作的具有相同类的复选框列表，每个复选框都在一个单独的 div 中。我需要找出 div 内所有相同类命名复选框之间特定复选框的位置编号。

例如

<div class="div_a1">
  <input type="checkbox" name="aaa" class="a1">title1
</div>
<div class="div_a2">
  <input type="checkbox" name="aaa" class="a2">title2
</div>
<div class="div_a1">
  <input type="checkbox" name="aaa" class="a1">title3
</div>
<div class="div_a4">
  <input type="checkbox" name="aaa" class="a4">title4
</div>
<div class="div_a2">
  <input type="checkbox" name="aaa" class="a2">title5
</div>
<div class="div_a3">
  <input type="checkbox" name="aaa" class="a3">title6
</div>
<div class="div_a1"> <-- user this div is clicked
  <input type="checkbox" name="aaa" class="a1">title7
</div>
<div class="div_a4">
  <input type="checkbox" name="aaa" class="a4">title8
</div>
<div class="div_a5">
  <input type="checkbox" name="aaa" class="a5">title9
</div>

我可以得到数字“3”，因为我点击了名为“div_a1”类的第三个复选框的 div 元素。

Answer 1

//正如您所提到的，您正在使用 Js 生成您的复选框。所以我会//使用 一些loop.for exp：for循环

for (var i = 0; i

    var htmltemp = '<div class="div_a1"><input type="checkbox" name="aaa" onclick="getNum('+(i+1)+');" class="a1" >title1</div>';

    $('.SuperParentDiv').append(htmltemp)

}

//可以定义函数

函数 getNum(rowid)

//As you mentioned, you are generating your checkbox using Js.So I would have //used some loop.for exp: for loop

var itemlist = ArrayOfYourDivAndCheckBoxRows[];

for (var i = 0; i < itemlist.length; i++) {

        var htmltemp = '<div class="div_a1"><input type="checkbox" name="aaa" onclick="getNum('+(i+1)+');" class="a1" >title1</div>';

        $('.SuperParentDiv').append(htmltemp)

    }


//and can define the function 

function getNum(rowid)
{
    console.log("div" + rowid + "was clicked");

}

{ console.log("div" + rowid + "被点击");

}

Answer 2

为每个输入字段添加一个 onclick 事件监听器，并将它们的位置编号作为参数传递给函数，如下所示

 <div class="div_a1">
     <input type="checkbox" name="aaa" onclick=getNum(1) class="a1" >title1
</div>
<div class="div_a2">
  <input type="checkbox" name="aaa" onclick=getNum(1) class="a2">title2
</div>
<div class="div_a1">
  <input type="checkbox" name="aaa" onclick=getNum(2) class="a1">title3
</div>
<div class="div_a4">
  <input type="checkbox" name="aaa" onclick=getNum(1) class="a4">title4
</div>
<div class="div_a2">
  <input type="checkbox" name="aaa" onclick=getNum(2) class="a2">title5
</div>
<div class="div_a3">
  <input type="checkbox" name="aaa" onclick=getNum(1) class="a3" >title6
</div>
<div class="div_a1"> 
  <input type="checkbox" name="aaa" onclick=getNum(3) class="a1">title7
</div>
<div class="div_a4">
  <input type="checkbox" name="aaa" onclick=getNum(2) class="a4" >title8
</div>
<div class="div_a5">
  <input type="checkbox" name="aaa" onclick=getNum(1) class="a5" >title9
</div>
  </body>
  
  
  <script>
 function getNum(num){
console.log(num)
 }
  </script>

Answer 3

在这种情况下有很多方法可以做到：

$('input').on('change', function(){

  // using the input class
  console.log( $(this).attr('class').replace( /^\D+/g, '') )
  
  // using the div class
  console.log( $(this).parent().attr('class').replace( /^\D+/g, '') )
  
  // using the title text
  console.log( $(this).parent().text().replace( /^\D+/g, '') )
  
  // using the index of the parent div from all divs with a class starting with "div_a"
  console.log( $(this).parent().parent().children('div[class^=div_a]').index($(this).parent()) + 1 )
})

body .as-console-wrapper {
    left: 50%;
    top: 0;
    bottom: 0;
    max-height: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div_a1">
  <input type="checkbox" name="aaa" class="a1">title1
</div>
<div class="div_a2">
  <input type="checkbox" name="aaa" class="a2">title2
</div>
<div class="div_a3">
  <input type="checkbox" name="aaa" class="a3">title3
</div>
<div class="div_a4">
  <input type="checkbox" name="aaa" class="a4">title4
</div>
<div class="div_a5">
  <input type="checkbox" name="aaa" class="a5">title5
</div>
<div class="div_a6">
  <input type="checkbox" name="aaa" class="a6">title6
</div>
<div class="div_a7">
  <input type="checkbox" name="aaa" class="a7">title7
</div>
<div class="div_a8">
  <input type="checkbox" name="aaa" class="a8">title8
</div>