How to check all checkbox when check on one checkbox and click on a button and get the values?
Question
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:-
<td><input type="checkbox" name="option" value="{{item.customerid}} " required ></td>
<input type="button" value="Transfer" (click)="getclickedevent($event)">
My Javascript file:-
getclickedevent(event) {
let id = $("input:checkbox[name=option]:checked").val();
console.log("The Required checkbox checked is "+ id)
}
5 answers
solution1
0 2020-04-05 07:19:14
make all the id's children of one master 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)
}
}
solution2
0 2020-04-05 07:25:50
You can get all checked checkboxes values inside button click event handler using jquery .map() method like:
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
solution3
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:
<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. I used jQuery because you missed native javascript and jQuery in your code:
$('input[type="button"][value="Transfer"]').click( function() {
let id = $("input:checkbox[name=option]").is(':checked');
$('input[name="options"]').each(function() {
this.checked = id;
});
});
You can see it all working here .
solution4
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>
solution5
0 2020-04-05 10:02:33
Add ID to your button inputs and call on them as selectors for .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.
Define an empty array to hold your values. Run your checked values through .each() loop and assign them to the array.
Those values will now live in the options array.
$(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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.