选中一个复选框并单击按钮并获取值时如何选中所有复选框？

Question

对于单个 id，我确实喜欢这样做，但是当检查所有列的通用复选框时，如何在单击按钮时获取所有 id 我的 Html 文件：-

 <td><input type="checkbox" name="option" value="{{item.customerid}} " required ></td>
 <input type="button" value="Transfer" (click)="getclickedevent($event)">

我的 Javascript 文件：-

 getclickedevent(event) {

  let id  = $("input:checkbox[name=option]:checked").val();

    console.log("The Required checkbox checked is "+ id)

  }

Answer 1

使一个主ID的所有ID的孩子

然后用这个

var div = // getElementById, etc
var children = div.childNodes;
var elements = [];
for (var i=0; i<div.childNodes.length; i++) {
  var child = div.childNodes[i];
  if (child.nodeType == 1) {
    elements.push(child)      
  }
}

Answer 2

您可以使用 jquery .map()方法在按钮单击事件处理程序中获取所有选中的复选框值，例如：

var ids = $("input:checkbox[name=option]:checked").map(function(){
    return $(this).val();
}).get();

console.log(ids) //==> ['xxx', 'xxx', 'xxx', ...]

这将给出一个包含所有选中复选框值的基本数组。

演示：

 $("#checkAll").click(function() { $("input:checkbox[name=option]").prop('checked', this.checked); var ids = $("input:checkbox[name=option]:checked").map(function() { return $(this).val(); }).get(); console.log(ids) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="checkAll">Check All <hr /> <input type="checkbox" name="option" value="1">Item 1 <input type="checkbox" name="option" value="2">Item 2 <input type="checkbox" name="option" value="3">Item3

Answer 3

我希望你不介意，但我采用了重构代码的方法。

这是 HTML：

<td>
  <input type="checkbox" name="option" value="{{item.customerid}}" required >
</td>
<input type="button" value="Transfer">

<div id='options'>
  <br><input name='options' type="checkbox">
  <br><input name='options' type="checkbox">
  <br><input name='options' type="checkbox">
  <br><input name='options' type="checkbox">
  <br><input name='options' type="checkbox">
</div>

这是 jQuery。 我使用 jQuery 是因为您在代码中错过了原生 javascript 和 jQuery ：

$('input[type="button"][value="Transfer"]').click( function() {  
  let id  = $("input:checkbox[name=option]").is(':checked');

    $('input[name="options"]').each(function() { 
        this.checked = id; 
      });
});

您可以在这里看到这一切。

Answer 4

这应该适合你。 ↓↓

 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <input type="checkbox" onclick="$('input[name*=\'customer_store\']').prop('checked', this.checked);"/> Select / Deselect<br> <input type="checkbox" name="customer_store[]" value="xyz"/>xyz<br> <input type="checkbox" name="customer_store[]" value="abc"/>abc<br>

Answer 5

将 ID 添加到您的按钮输入并作为.click()的选择器调用它们。

Add a function to get the click on the select all button and set all inputs to checked used an added class of option for to select the input elements that are check boxes.

定义一个空数组来保存您的值。 通过.each()循环运行您检查的值并将它们分配给数组。

这些值现在将存在于options数组中。

 $(document).ready(function() { $('#selectall').click(function(){ $('.option').prop("checked", true); }); $('#transfer').click(function() { var options = []; $.each($("input[type='checkbox']:checked"), function() { options.push($(this).val()); }); console.log(options); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="option" type="checkbox" name="option" value="{{item.customerid}}"> <input class="option" type="checkbox" name="option" value="{{item.customerid}}"> <input class="option" type="checkbox" name="option" value="{{item.customerid}}"> <input class="option" type="checkbox" name="option" value="{{item.customerid}}"> <input type="button" id="transfer" value="Transfer"> <input type="button" id="selectall" value="Select All">

选中一个复选框并单击按钮并获取值时如何选中所有复选框？

问题描述

5 个解决方案

解决方案1
0 2020-04-05 07:19:14

解决方案2
0 2020-04-05 07:25:50

解决方案3
0 2020-04-05 08:27:29

解决方案4
0 2020-04-05 09:44:50

解决方案5
0 2020-04-05 10:02:33

选中一个复选框并单击按钮并获取值时如何选中所有复选框？

问题描述

5 个解决方案

解决方案1 0 2020-04-05 07:19:14

解决方案2 0 2020-04-05 07:25:50

解决方案3 0 2020-04-05 08:27:29

解决方案4 0 2020-04-05 09:44:50

解决方案5 0 2020-04-05 10:02:33

解决方案1
0 2020-04-05 07:19:14

解决方案2
0 2020-04-05 07:25:50

解决方案3
0 2020-04-05 08:27:29

解决方案4
0 2020-04-05 09:44:50

解决方案5
0 2020-04-05 10:02:33