At first, I request you to see these two images.
image 1
image 2
There are more than 20 fields like in 'Image 1'. If select yes then show a table like in 'Image 2'. So I have 20 Yes/No field and 20 different tables.
How can I show the tables if select yes. I have tried some code for a single field. As there are lots of fields I want to know is there any way to make the code minimal and easier. Here is my code that I tried:
CSS:
#show-dc-table {
display: none;
}
Script:
<script>
$(document).ready(function() {
$('.form-check-inline input[type="radio"]').click(function() {
if ($(this).attr('id') == 'allergy-yes') {
$('#show-dc-table').show();
} else {
$('#show-dc-table').hide();
}
});
});
</script>
HTML:
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have Allergies </label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="Yes" id="allergy-yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped" id="show-dc-table">
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</table>
To make the same code work for multiple repeated HTML structures group elements by behaviour using the same class on each. Then use DOM traversal to relate the elements to each other when certain events happen.
In your case you would use closest() and next() to find the table related to the changed radio. Also note that you should use the checked property of the radio, along with the change event, to determine the value selected. Try this:
$(document).ready(function() {
$('.form-check-inline input[type="radio"]').on('change', function() {
$(this).closest('.form-group').next('table').toggle(this.checked && this.value === 'Yes');
});
});
.show-dc-table {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have allergies?</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="Yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped show-dc-table">
<thead>
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aspirin, Ibuprofen, Codeine</td>
<td><input type="radio" name="a1" /></td>
<td><input type="radio" name="a2" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have a cough?</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="cough" value="Yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="cough" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped show-dc-table">
<thead>
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td><input type="radio" name="a1" /></td>
<td><input type="radio" name="a2" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
To generalize any DOM manipulation script, do not use hardcoded ids. Use methods like closest , find , next , prev. Two methods closest , find are used in this particular example.
$(document).ready(function() {
$('.form-check-inline input[type="radio"]').click(function() {
if ($(this).val() == 'Yes') {
$(this).closest('.form-group').next('table').show();
} else {
$(this).closest('.form-group').next('table').hide();
}
});
});
.table.table-striped {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have Allergies </label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="Yes" id="allergy-yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped" id="show-dc-table">
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</table>
Related
I am trying the get all the values of a table row, I am not able get the selected radio button value from each table row. The table is getting generated in dynamic nature so I cant access with a static values. So I tried to extract the values using the below code:
<div class="tbl card px-2 py-2 my-2" id="GCSA3011">
<div class="card-body">
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered table-hover GCSA3011 ptbl dataTable no-footer dtr-inline" id="DataTables_Table_0" role="grid">
<thead>
<tr style="text-align: center;" role="row">
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 5%;">#</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 55%;">Question</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 40%;">Response</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="dtr-control" tabindex="0">
<label class="lnx-fd" id="LAB1029_6192" tag="LAB1029" fl-type="label">
1
</label>
</td>
<td>
<label class="lnx-fd" id="LAB1030_6192" tag="LAB1030" fl-type="label">
Instructions
</label>
</td>
<td>
<div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_6192">
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Outstanding
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192" checked="">Excellent
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Good
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Average
</label>
</div>
</td>
</tr>
<tr role="row" class="even">
<td class="dtr-control" tabindex="0">
<label class="lnx-fd" id="LAB1029_4655" tag="LAB1029" fl-type="label">
31
</label>
</td>
<td>
<label class="lnx-fd" id="LAB1030_4655" tag="LAB1030" fl-type="label">
Response
</label>
</td>
<td>
<div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_4655">
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Outstanding
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655" checked="">Excellent
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Good
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Average
</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
$(".tbl").each(function(){
let tgroup_id = $(this).attr("id");
let tgp_err = [],tgp_obj = [];
var itbl = $('.'+tgroup_id).DataTable();
itbl.rows().every(function () {
let comp_arr_g=[];
var d = this.data();
for(var i=0;i<d.length;i++){
var a = $('input[name="'+$(d[i]).attr('id') +'"]:checked');
}
});
});
Using this I am able to get the value of label and input fields but when I trying to get the selected radio it is not working. Please help me to get it solved.
You can check if d[i] attribute(fl-type) value is radiogroup or not if true then you can simply use find(":checked").closest("label").text() to get checked radio value else just use $(d[i]).text() to get other tds values .
Demo Code :
$(".tbl").each(function() {
let tgroup_id = $(this).attr("id");
let tgp_err = [],
tgp_obj = [];
var itbl = $('.' + tgroup_id).DataTable();
itbl.rows().every(function() {
let comp_arr_g = [];
var d = this.data();
for (var i = 0; i < d.length; i++) {
//check if the attr is radiogroup
if ($(d[i]).attr("fl-type") == "radiogroup") {
//get checked radio
var a = $(d[i]).find(":checked").closest("label").text().trim()
console.log(a)
} else {
//just label
console.log($(d[i]).text().trim())
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<div class="tbl card px-2 py-2 my-2" id="GCSA3011">
<div class="card-body">
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered table-hover GCSA3011 ptbl dataTable no-footer dtr-inline" id="DataTables_Table_0" role="grid">
<thead>
<tr style="text-align: center;" role="row">
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 5%;">#</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 55%;">Question</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 40%;">Response</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="dtr-control" tabindex="0">
<label class="lnx-fd" id="LAB1029_6192" tag="LAB1029" fl-type="label">
1
</label>
</td>
<td>
<label class="lnx-fd" id="LAB1030_6192" tag="LAB1030" fl-type="label">
Instructions
</label>
</td>
<td>
<div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_6192">
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192" checked>Outstanding
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192" >Excellent
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Good
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Average
</label>
</div>
</td>
</tr>
<tr role="row" class="even">
<td class="dtr-control" tabindex="0">
<label class="lnx-fd" id="LAB1029_4655" tag="LAB1029" fl-type="label">
31
</label>
</td>
<td>
<label class="lnx-fd" id="LAB1030_4655" tag="LAB1030" fl-type="label">
Response
</label>
</td>
<td>
<div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_4655">
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Outstanding
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655" checked="">Excellent
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Good
</label>
<label class="form-check-label" style="margin-left:20px;display:inline-block;">
<input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Average
</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
On the front view, I have:
<div class="single-category-container">
<table>
<thead>
<tr>
<th scope="col">Base</th>
<th scope="col">Select</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
#foreach($data as $cvk => $cvv)
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_{{$ck}}" id="am_{{ $cvv['amenity_id'] }}" value="{{ $cvv['amenity_id'] }}">
<label for="am_{{ $cvv['amenity_id'] }}">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_{{ $cvv['amenity_id'] }}" type="checkbox" checked="checked">
<label for="checkbox_am_{{ $cvv['amenity_id'] }}">
</label>
</div>
</td>
<td>{{ $cvv['amenity_name'] }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
Here, you can see on the first column that there is radio and on second column there is checkbox. So, my requirements is whenever a radio button is checked, I want all the checkbox to be checked of that single-category-container except the checkbox of the same row where the radio button is checked.
I have tried the following code but with no success:
$('.single-category-container input[type=radio]').change(function() {
$(this).parents('.single-category-container input[type=checkbox]').attr('checked',true);
$(this).parents('tr input[type=checkbox]').attr('checked',false);
});
Note: there are multiple `.single-category-container` that is even this container is in a loop, here I am representing just a element from the loop because it should give the idea.
Try as follows. You need to add find for this.
$('.aprFilterCol input[type=radio]').change(function() {
$(this).parents('.single-category-container').find('input[type="checkbox"]').prop('checked',true);
$(this).parents('tr').find('input[type="checkbox"]').prop('checked',false);
});
The selectors which are used to find the parent are wrong. Instead of trying to find the elements in one go by doing $(this).parents('.single-category-container input[type=checkbox]')', first find the closest parent and then find the matching child elements inside it. Here is the working example
$(document).on('change', '.single-category-container input[type=radio]', function() {
$(this).closest('.single-category-container').find('input[type=checkbox]').prop('checked', true);
$(this).closest('tr').find('input[type=checkbox]').prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="single-category-container">
<table>
<thead>
<tr>
<th scope="col">Base</th>
<th scope="col">Select</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio1" value="">
<label for="radio1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check1" type="checkbox">
<label for="check1">
</label>
</div>
</td>
<td>Name</td>
</tr>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio2" value="">
<label for="radio2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check2" type="checkbox">
<label for="check2">
</label>
</div>
</td>
<td>Name</td>
</tr>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio3" value="">
<label for="radio3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check3" type="checkbox">
<label for="check3">
</label>
</div>
</td>
<td>Name</td>
</tr>
<tr class="am-row">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat" id="radio4" value="">
<label for="radio4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="check4" type="checkbox">
<label for="check4">
</label>
</div>
</td>
<td>Name</td>
</tr>
</tbody>
</table>
</div>
I want to change commitment text to be changed with input field when I click on commitment and when I press enter it should show the newly entered input.
I am new to javascript but I looked many codes but they didn't slove what I want please can you provide any idea how to do this?`
<div class="table-responsive">
<table class="table table-bordered table-hover" id="dtBasicExample" cellspacing="0" width="100%">
<!-- Table head -->
<thead class="theader">
<tr>
<th>Grade</th>
<th>Student</th>
<th>
<!-- Default un -->
<!-- <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck1">
<label class="custom-control-label" for="tableDefaultCheck1">P/A</label>
</div> -->P/A
</th>
<th>Check-In</th>
<th>Check-Out</th>
<th>Tutor</th>
<th>Videos</th>
<th>Others</th>
<th>Commitment</th>
</tr>
</thead>
<tbody>
</tr>
<tr>
<td>7</td>
<td>Name</td>
<th scope="row">
<!-- Default un -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
<label class="custom-control-label" for="tableDefaultCheck3"></label>
</div>
</th>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Commitment
<div class="md-form">
<input type="text" id="form2" class="form-control">
<label for="form2">New Commitment</label>
</div>
</td>
</tr>
</tbody>
</table>
Is this what you are looking for?
$('.md-form input').keydown(function(e) {
if(e.keyCode == 13 && $(this).val().length > 0){
$(this).next().text($(this).val())
}
});
Working demo
$('.md-form input').keydown(function(e) {
if (e.keyCode == 13 && $(this).val().length > 0) {
$(this).next().show().text($(this).val())
$(this).hide();
}
});
$('.Commitment label').click(function() {
$(this).prev().show();
$(this).hide();
})
.Commitment input {
display: none;
}
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div class="table-responsive">
<table class="table table-bordered table-hover" id="dtBasicExample" cellspacing="0" width="100%">
<!-- Table head -->
<thead class="theader">
<tr>
<th>Grade</th>
<th>Student</th>
<th>
<!-- Default un -->
<!-- <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck1">
<label class="custom-control-label" for="tableDefaultCheck1">P/A</label>
</div> -->P/A
</th>
<th>Check-In</th>
<th>Check-Out</th>
<th>Tutor</th>
<th>Videos</th>
<th>Others</th>
<th>Commitment</th>
</tr>
</thead>
<tbody>
<tr>
<td>7</td>
<td>Name</td>
<th scope="row">
<!-- Default un -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
<label class="custom-control-label" for="tableDefaultCheck3"></label>
</div>
</th>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td class="Commitment">
<div class="md-form">
<input type="text" id="form2" class="form-control">
<label for="form2">New Commitment</label>
</div>
</td>
</tr>
<tr>
<td>7</td>
<td>Name</td>
<th scope="row">
<!-- Default un -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
<label class="custom-control-label" for="tableDefaultCheck3"></label>
</div>
</th>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td>Time</td>
<td class="Commitment">
<div class="md-form">
<input type="text" id="form2" class="form-control">
<label for="form2">New Commitment</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I'm using iCheck for checkbox style in bootstrap , but I'm having some issues I can't check/uncheck all ,, and dotn work refresh data table in time, need to refresh page , or page refreshed itslef.
and checkbox in premium or public , when I select it will stay checked and after i will reload page ,,
<div class="table-responsive">
<table class="table">
<!-- Start Header -->
<thead>
<tr>
<th>
<label class="checkbox checkbox-inline">
<input type="checkbox" name="file_id" value="0">
</label>
</th>
<th>Text Name</th>
<th>Sixe Date</th>
<th>Created Date</th>
<th>Something</th>
<th>Premium</i>
</th>
<th>Public</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<label class="checkbox checkbox-inline">
<input id="check" type="checkbox" name="file_id">
</label>
</th>
<td>Something</td>
<td>Size</td>
<td>Date</td>
<td>Name</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox" name="file_premium_only" </label>
</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox">
</label>
</td>
</tr>
<tr>
<th scope="row">
<label class="checkbox checkbox-inline">
<input id="check" type="checkbox" name="file_id">
</label>
</th>
<td>Something</td>
<td>Size</td>
<td>Date</td>
<td>Name</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox" name="file_premium_only" </label>
</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox">
</label>
</td>
</tr>
</table>
</div>
<!-- /.table-responsive -->
here u can see codepen example:
http://codepen.io/anon/pen/QjvomM
You can use ifToggled iCheck event and if checked/unchecked act accordingly in the other rows using check and uncheck methods.
Ref:
https://github.com/fronteed/iCheck#callbacks
https://github.com/fronteed/iCheck#methods
Side note: I set a specific class all for the select all check and a specific class each row check selector, avoid mutiple id values.
Code:
jQuery(document).ready(function ($) {
$('input').iCheck({
checkboxClass: 'icheckbox_flat-pink',
radioClass: 'iradio_flat-pink'
});
$('input.all').on('ifToggled', function (event) {
var chkToggle;
$(this).is(':checked') ? chkToggle = "check" : chkToggle = "uncheck";
$('input.selector:not(.all)').iCheck(chkToggle);
});
});
Demo: http://jsfiddle.net/IrvinDominin/estL6xrv/
If I understand the question correctly you wish to give your page the functionality to check/uncheck a collection of iCheck checkboxes at the same time?
I achieved something similar to this with the following jQuery function..
function ToggleCheckboxes() {
var flag = $('#togglebox').is(':checked')
$("[name='PrintCheck']").each(function () {
if (flag == true) {
$(this).iCheck('check');
} else {
$(this).iCheck('uncheck');
}
});
}
This function was assigned to the onchange of the top checkbox. This would then find all of the checkboxes with the name 'PrintCheck' and either check or uncheck.
<input type="checkbox" id="togglebox" onchange="ToggleCheckboxes();">
Hope this helps!
I have a set of input checkboxes with the same name
and I would like to determine which checkboxes have been checked using javascript, how can I achieve that?
I know only how to get all the checkboxes as follows:
var checkboxes = document.getElementsByName('mycheckboxes');
In IE9+, Chrome or Firefox you can do:
var checkedBoxes = document.querySelectorAll('input[name=mycheckboxes]:checked');
A simple for loop which tests the checked property and appends the checked ones to a separate array. From there, you can process the array of checkboxesChecked further if needed.
// Pass the checkbox name to the function
function getCheckedBoxes(chkboxName) {
var checkboxes = document.getElementsByName(chkboxName);
var checkboxesChecked = [];
// loop over them all
for (var i=0; i<checkboxes.length; i++) {
// And stick the checked ones onto an array...
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i]);
}
}
// Return the array if it is non-empty, or null
return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}
// Call as
var checkedBoxes = getCheckedBoxes("mycheckboxes");
For a simple two- (or one) liner this code can be:
checkboxes = document.getElementsByName("NameOfCheckboxes");
selectedCboxes = Array.prototype.slice.call(checkboxes).filter(ch => ch.checked==true);
Here the Array.prototype.slice.call() part converts the object NodeList of all the checkboxes holding that name ("NameOfCheckboxes") into a new array, on which you then use the filter method. You can then also, for example, extract the values of the checkboxes by adding a .map(ch => ch.value) on the end of line 2.
The => is javascript's arrow function notation.
Get all the checked checkbox value in an array - one liner
const data = [...document.querySelectorAll('.inp:checked')].map(e => e.value);
console.log(data);
<div class="row">
<input class="custom-control-input inp"type="checkbox" id="inlineCheckbox1" Checked value="option1">
<label class="custom-control-label" for="inlineCheckbox1">Option1</label>
<input class="custom-control-input inp" type="checkbox" id="inlineCheckbox1" value="option2">
<label class="custom-control-label" for="inlineCheckbox1">Option2</label>
<input class="custom-control-input inp" Checked type="checkbox" id="inlineCheckbox1" value="option3">
<label class="custom-control-label" for="inlineCheckbox1">Option3</label>
</div>
You can just give a class for all checkboxes in the form, and get their checked property like this:
document.querySelectorAll('.mycheckbox').forEach(function(elem) {
console.log(elem.checked);
});
<div>
<label><input type="checkbox" name="mycheckbox[]" class="mycheckbox" value="1" checked="checked">Johnson</label>
</div>
<div>
<label><input type="checkbox" name="mycheckbox[]" class="mycheckbox" value="2">
Henry</label>
</div>
<div>
<label><input type="checkbox" name="mycheckbox[]" class="mycheckbox" value="3" checked="checked">
Donald</label>
</div>
$(document).ready(function () {
// Single check Box Checked
$(document).on("change", ".check_class", function () {
$(".check_class").prop("checked", false);
$(this).prop("checked", true);
var value = $(this).val();
console.log("Device Serial No is = " + value)
});
//get all emp Selected
$(document).on("click", "#EmpUpload", function (evnt) {
var emp =[]
const data = [...document.querySelectorAll('.EmpID:checked')].map(e => e.value);
emp.push(data)
console.log("Selected Emp Here [] = " + emp);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Employee CheckBox Data Sample </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid w-75 pt-5">
<div class="row border-top">
<div class="col-md-12">
<button type="button" class="btn btn-success float-right" id="EmpUpload">Get On Click</button>
</div>
<div class="col-md-4 border-right">
<table id="example" class="display w-100">
<thead>
<tr>
<th>#</th>
<th>Device</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check_class" value="990099" name="serialNo" /></td>
<td>Office</td>
<td>Delhi</td>
</tr>
<tr>
<td><input type="checkbox" class="check_class" value="778899" name="serialNo" /></td>
<td>Garrett</td>
<td>Accountant</td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-8">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="EmpID" value="1001" name="serialNo" /></td>
<td>1001</td>
<td>Shaqubi Hassan</td>
</tr>
<tr>
<td><input type="checkbox" class="EmpID" value="1002" name="serialNo" /></td>
<td>1002</td>
<td>Balwinder Singh</td>
</tr>
<tr>
<td><input type="checkbox" class="EmpID" value="1003" name="serialNo" /></td>
<td>1003</td>
<td>Balwinder Singh</td>
</tr>
<tr>
<td><input type="checkbox" class="EmpID" value="1004" name="serialNo" /></td>
<td>1004</td>
<td>Singh</td>
</tr>
<tr>
<td><input type="checkbox" class="EmpID" value="1005" name="serialNo" /></td>
<td>1005</td>
<td>Sohi</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
if you are using the <form> element you can take advantage of the form event using :
function onSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
console.log(data.getAll("mycheckboxs")) // will print only checked inputs
}
<form onsubmit="onSubmit(event)">
<label for="checkbox1">
Checkbox 1
<input id="checkbox1" name="mycheckboxs" type="checkbox" checked="true" value="1"/>
</label><br/>
<label for="checkbox2">
Checkbox 2
<input id="checkbox2" name="mycheckboxs" type="checkbox" value="2"/>
</label><br/>
<label for="checkbox3">
Checkbox 3
<input id="checkbox3" name="mycheckboxs" type="checkbox" value="3"/>
</label><br/>
<label for="checkbox4">
Checkbox 4
<input id="checkbox4" name="mycheckboxs" type="checkbox" checked="true" value="4"/>
</label><br/>
<div>
<br/>
<button type="submit">Submit</button>
</div>
</form>
Good luck!!