如何获取选中的动态复选框的值

Question

我有以下复选框从数据库中获取

while($result = mysqli_fetch_array($query)){
    $srNumber = $result['srNumber'];
    $oaName = $result['oaName'];
    echo '
        <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="'.$oaName.'"></td>
        <td>'.$oaName.'</td>
        </tr>';
}

并使用以下代码来获取那些选中复选框的值

 < script > $(document).ready(function() { $(".checkBoxes").click(function() { if ($(this).is(":checked")) { var searchIDs = $(".checkBoxes").map(function() { return $(this).val(); }).get(); alert(searchIDs); } }); }); < /script >

问题

我的问题是，无论是否选中，它总是会获得所有复选框的值。 我可以知道如何只获取选中的框值吗？

Answer 1

您可以使用$(".checkBoxes:checked")选择器来获取选中的复选框。

 $(document).ready(function() { $(".checkBoxes").click(function() { if ($(this).is(":checked")) { var searchIDs = $(".checkBoxes:checked").map(function() { return $(this).val(); }).get(); console.log(searchIDs); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="1" checked> <input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="2"> <input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="3" checked> <input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="4">

Answer 2

您需要使用:checked选择器仅检索已选中的复选框。 另请注意，在处理复选框和单选输入时应使用change事件。 尝试这个：

 $(".checkBoxes").change(function() { var searchIDs = $(".checkBoxes:checked").map(function() { return $(this).val(); }).get(); console.log(searchIDs); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="Name1"></td> <td>Name1</td> </tr> <tr> <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="Name2"></td> <td>Name2</td> </tr> <tr> <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="Name3"></td> <td>Name3</td> </tr> </table>

Answer 3

使用is(':checked')检查它是否被选中， each循环遍历类checkBoxes所有复选框

 $('.getvalue').click(function(e){ $('.checkBoxes').each(function(e){ if($(this).is(':checked')) { console.log($(this).val()) } }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type = "checkbox" value="1" class="checkBoxes">One <input type = "checkbox" value="2" class="checkBoxes">Two <input type = "checkbox" value="3" class="checkBoxes">Three <input type = "checkbox" value="4" class="checkBoxes">Four <button class="getvalue">Check</button>

Answer 4

你可以试试这个：

 <!DOCTYPE html> <html><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).on('click','.checkbox',function(){ $('.checkbox').each((index, chk)=>{ console.log($(chk).is(':checked')); }); }); </script> <body> <form action="/action_page.php" method="get"> <input type="checkbox" class="checkbox" name="vehicle" value="1">1<br> <input type="checkbox" class="checkbox" name="vehicle" value="2">2<br> <input type="checkbox" class="checkbox" name="vehicle" value="3">3<br> <input type="checkbox" class="checkbox" name="vehicle" value="4">4<br> </form> </body> </html>

Answer 5

嗨@Anu，如果您需要如上所述“我只需要在有人单击这些复选框并检查时获取该值。不过感谢您的努力”

$(document).ready(function() {
  let element = $(".checkBoxes");
  element.click(function(e) {
    if (!$(this).is(":checked")) return; // checks for currently clicked
    element.each(function(e) {
      if ($(this).is(":checked")) {
        console.log($(this).val());
      }
    });
  });
});

如何获取选中的动态复选框的值

问题描述

5 个解决方案

解决方案1
2 已采纳 2019-08-14 09:10:43

解决方案2
1 2019-08-14 09:11:30

解决方案3
0 2019-08-14 09:12:38

解决方案4
0 2019-08-14 09:20:08

解决方案5
0 2019-08-14 09:32:58

如何获取选中的动态复选框的值

问题描述

5 个解决方案

解决方案1 2 已采纳 2019-08-14 09:10:43

解决方案2 1 2019-08-14 09:11:30

解决方案3 0 2019-08-14 09:12:38

解决方案4 0 2019-08-14 09:20:08

解决方案5 0 2019-08-14 09:32:58

解决方案1
2 已采纳 2019-08-14 09:10:43

解决方案2
1 2019-08-14 09:11:30

解决方案3
0 2019-08-14 09:12:38

解决方案4
0 2019-08-14 09:20:08

解决方案5
0 2019-08-14 09:32:58