选中一个复选框并单击按钮并获取值时如何选中所有复选框？
[英]How to check all checkbox when check on one checkbox and click on a button and get the values?
问题描述
for single id i did like this but how to get all id on click of button when check the universal checkbox for all the columns My Html File:-
对于单个 id，我确实喜欢这样做，但是当检查所有列的通用复选框时，如何在单击按钮时获取所有 id 我的 Html 文件：-
<td><input type="checkbox" name="option" value="{{item.customerid}} " required ></td>
<input type="button" value="Transfer" (click)="getclickedevent($event)">
My Javascript file:-我的 Javascript 文件：-
getclickedevent(event) {
let id = $("input:checkbox[name=option]:checked").val();
console.log("The Required checkbox checked is "+ id)
}
5 个解决方案
解决方案1
0 2020-04-05 07:19:14
make all the id's children of one master id使一个主ID的所有ID的孩子
then use this然后用这个
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)
}
}
解决方案2
0 2020-04-05 07:25:50
You can get all checked checkboxes values inside button click event handler using jquery .map() method like:您可以使用 jquery .map()方法在按钮单击事件处理程序中获取所有选中的复选框值，例如：
var ids = $("input:checkbox[name=option]:checked").map(function(){
return $(this).val();
}).get();
console.log(ids) //==> ['xxx', 'xxx', 'xxx', ...]
This will give a basic array containing all checked checkboxes values.这将给出一个包含所有选中复选框值的基本数组。
DEMO:演示：
$("#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
解决方案3
0 2020-04-05 08:27:29
I hope you don't mind but I took the approach of refactoring your code.我希望你不介意，但我采用了重构代码的方法。
Here is the HTML:这是 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>
And here is the jQuery.这是 jQuery。 I used jQuery because you missed native javascript and jQuery in your code:我使用 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;
});
});
解决方案4
0 2020-04-05 09:44:50
This should work for you.这应该适合你。 ↓↓ ↓↓
<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>
解决方案5
0 2020-04-05 10:02:33
Add ID to your button inputs and call on them as selectors for .click() .将 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. 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.
Define an empty array to hold your values.定义一个空数组来保存您的值。 Run your checked values through .each() loop and assign them to the array.通过.each()循环运行您检查的值并将它们分配给数组。
Those values will now live in the options array.这些值现在将存在于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">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.