I'm trying to change some pricing tables according the option provided by the user.
For example, if he chooses 36 Months and Monthly, it will show a div (display: block;) and for the other options, 6 in total.
I was trying to follow this answer here but it will not work.. Any advise please? My goal it's to make a function that onChange/onClick it will show the divs, only after the 2 options selected.
<table width="100%">
<tbody>
<tr>
<td>Laufzeit:</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="24-m" id="laufzeit_0" checked>
24 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="36-m" id="laufzeit_1">
36 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="48-m" id="laufzeit_2">
48 Months</label>
</td>
</tr>
<tr>
<td>Abrechnung:</td>
<td align="center"><label>
<input type="radio" name="abrechnung" value="monthly" id="abrechnung_0" checked>
Monthly</label>
</td>
<td align="center"><label>
<input type="radio" name="abrechnung" value="yearly" id="abrechnung_1">
Yearly</label>
</td>
<td align="center"></td>
</tr>
</tbody>
<div class="filter-24-m">24 m</div>
<div class="filter-24-y">24 y</div>
<div class="filter-36-m">36 m</div>
<div class="filter-36-y">36 y</div>
<div class="filter-48-m">48 m</div>
<div class="filter-48-y">48 y</div>
Thank you so much!
You can have similar code for other radiobuttons also
$("#laufzeit_0").change(function(){
if($(this).is(":checked")){
if($("#abrechnung_0").is(":checked")){
$("div.YOUR_DIV_CLASS").show();
}
}
});
You can do it with one function. The divs are shown only after the 2 options selected.
Try something like this :
$(document).ready(function() {
$('input[name=abrechnung]').change(function() {
var laufzeit = $('input[name=laufzeit]:checked').val();
if(laufzeit.length > 0) {
var abrechnung = $('input[name=abrechnung]:checked').val();
$('.content').hide();
$('.' + laufzeit + '-' + abrechnung).show();
}
});
$('input[name=laufzeit]').change(function() {
$('input[name=abrechnung]').prop('checked', false);
$('.content').hide();
});
});
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%">
<tbody>
<tr>
<td>Laufzeit:</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="24-m" id="laufzeit_0" checked>
24 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="36-m" id="laufzeit_1">
36 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" value="48-m" id="laufzeit_2">
48 Months</label>
</td>
</tr>
<tr>
<td>Abrechnung:</td>
<td align="center"><label>
<input type="radio" name="abrechnung" value="monthly" id="abrechnung_0" checked>
Monthly</label>
</td>
<td align="center"><label>
<input type="radio" name="abrechnung" value="yearly" id="abrechnung_1">
Yearly</label>
</td>
<td align="center"></td>
</tr>
</tbody>
</table>
<div class="content 24-m-monthly" style="display:block">24-m monthly</div>
<div class="content 36-m-monthly">36-m monthly</div>
<div class="content 48-m-monthly">48-m monthly</div>
<div class="content 24-m-yearly">24-m yearly</div>
<div class="content 36-m-yearly">36-m yearly</div>
<div class="content 48-m-yearly">48-m yearly</div>
I'd do it by giving the radio's classes and check for any change in the class like so:
<input type="radio" name="laufzeit" class="laufzeit" value="24-m" id="laufzeit_0">
24 Months</label>
Then you can check for any changes to show and hide the respective divs.
var laufzeit;
var abrechnung;
$(".laufzeit").change(function(){
laufzeit = $(this).attr('value');
if(abrechnung == ""){return}
else{
$('.show').hide();
$('.'+abrechnung + '-' + laufzeit).show();
$('.'+abrechnung + '-' + laufzeit).addClass('show');
}
});
$(".abrechnung").change(function(){
abrechnung = $(this).attr('value');
if(laufzeit == ""){return}
else{
$('.show').hide();
$('.'+abrechnung + '-' + laufzeit).show();
$('.'+abrechnung + '-' + laufzeit).addClass('show');
}
});
With the rest looking like so:
<table width="100%">
<tbody>
<tr>
<td>Laufzeit:</td>
<td align="center"><label>
<input type="radio" name="laufzeit" class="laufzeit" value="24-m" id="laufzeit_0">
24 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" class="laufzeit" value="36-m" id="laufzeit_1">
36 Months</label>
</td>
<td align="center"><label>
<input type="radio" name="laufzeit" class="laufzeit" value="48-m" id="laufzeit_2">
48 Months</label>
</td>
</tr>
<tr >
<td>Abrechnung:</td>
<td align="center"><label>
<input type="radio" name="abrechnung" class="abrechnung" value="monthly" id="abrechnung_0">
Monthly</label>
</td>
<td align="center"><label>
<input type="radio" name="abrechnung" class="abrechnung" value="yearly" id="abrechnung_1">
Yearly</label>
</td>
<td align="center"></td>
</tr>
</tbody>
</table>
<div class="content 24-m-monthly show">24-m monthly</div>
<div class="content 36-m-monthly">36-m monthly</div>
<div class="content 48-m-monthly">48-m monthly</div>
<div class="content 24-m-yearly">24-m yearly</div>
<div class="content 36-m-yearly">36-m yearly</div>
<div class="content 48-m-yearly">48-m yearly</div>
Related
Whenever I click on select-all on top of the table it goes back to the first page. I need to select some rows in the table and export them to a CSV file but when selecting on different pages, when I click on select all it goes back to page 1.
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_<?php echo $valuep['0'] ;?>">
<input id="checkbox_<?php echo $valuep['0'] ;?>" type="checkbox" name="leads_ids" value="<?php echo $valuep['0'] ;?>" class="select_click">
<span></span>
</label>
<input type="hidden" id="enable_all" name="enable_all" value="1">
<input type="hidden" id="lead_contact_id_<?php echo $valuep['0'] ;?>" name="contact_id" value="<?php echo $valuep['0'] ;?>">
</div>
<span id="custom_controls"></span>
</td>
var table = $('#mytable').DataTable({
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'checkbox check-success'
}],
'order': [
[1, 'asc']
]
});
I suggest try trigger click all checkbox in the current visible page.
var myTable = $('#mytable').DataTable({
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
}],
'order': [
[1, 'asc']
],
});
$(document).on('click', '#select_all', function() {
$('input.select_click', document).each(function() {
$(this).trigger('click');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<table class="table table-bordered" id="mytable">
<thead>
<th>Select All</th>
<th>Data</th>
</thead>
<tbody>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_1" type="checkbox" name="leads_ids" value="1" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 1</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
<tr>
<td class="check_box_data">
<div class="checkbox check-success">
<label class=" mt-checkbox mt-checkbox-outline" for="checkbox_1">
<input id="checkbox_2" type="checkbox" name="leads_ids" value="2" class="select_click">
<span></span>
</label>
</div>
<span id="custom_controls"></span>
</td>
<td>Test Data 2</td>
</tr>
</tbody>
</table>
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 am trying to show and hide tr of table with checkbox check and uncheck. I tried the following script not working for me.
$('.checks').on('ifChecked', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').show();
}
if (checked == 2) {
$('.fruits').show();
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
Here's what you need to do:
Change ifChecked with onchange. There's no event like ifChecked.
Use toggle based on the state of the checkbox.
Check for $(this).checked to find the state. This will return true or false.
$('.checks').on('change', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').toggle($(this).checked);
}
if (checked == 2) {
$('.fruits').toggle($(this).checked);
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" /> vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" /> Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
Theres a couple of issues in your logic. Firstly ifChecked is not a valid event. Use change instead. Secondly the logic doesn't work to hide elements. To do that you'd need to loop through all checkboxes and determine their state in order to show/hide the content underneath.
The simplest and most extensible way to achieve what you require is to use a data attribute to specify which element should be toggled when the checkbox is updated. Then you can simply hide/show each element in the set. Try this:
let $checks = $('.checks').on('change', () => $checks.each((i, el) => $(el.dataset.target).toggle(el.checked)));
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" data-target=".vegetables">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" data-target=".fruits">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
<div id="Page1">
<p><strong><em>(*) 1 ) Page 1 Question 1</em></strong>
</p>
</div>
<br>
<br>
<div id="Checklist1B7">
<table class="c1">
<tr>
<td width="1%"><label class="c1"><input id="QUESTION1A1" name="S1A" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION1A1">Strongly Disagree</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION1A2" name="S1B" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION1A2">Disagree</label>
</div>
</td>
<td width="1%"><label class="c3"><input id="QUESTION1A3" name="S1C" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c6" for="QUESTION1A3">Undecided</label>
</div>
</td>
</tr>
<tr>
<td width="1%"><label class="c1"><input id="QUESTION1A4" name="S1D" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION1A4">Agree</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION1A5" name="S1E" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION1A5">Strongly Agree</label>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var num_checked = $("input[type=checkbox]:checked").length;
if (num_checked > 2) {
alert("sorry, you have already selected more than max !" );
$(e.target).attr('checked',false);
}
});
</script>
<p><strong><em>2 ) Page 1 Question 2</em></strong>
</p>
<br>
<br>
<div id="Checklist2B7">
<table class="c1">
<tr>
<td width="1%"><label class="c1"><input id="QUESTION2A1" name="S2A" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION2A1">Monday</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION2A2" name="S2B" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION2A2">Tuesday</label>
</div>
</td>
<td width="1%"><label class="c3"><input id="QUESTION2A3" name="S2C" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c6" for="QUESTION2A3">Wednesday</label>
</div>
</td>
</tr>
<tr>
<td width="1%"><label class="c1"><input id="QUESTION2A4" name="S2D" type=
"checkbox" value="4"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION2A4">Thursday</label>
</div>
</td>
<td width="1%"><label class="c2"><input id="QUESTION2A5" name="S2E" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c5" for="QUESTION2A5">Friday</label>
</div>
</td>
<td width="1%"><label class="c3"><input id="QUESTION2A6" name="S2F" type=
"checkbox"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c6" for="QUESTION2A6">Saturday</label>
</div>
</td>
</tr>
<tr>
<td width="1%"><label class="c1"><input id="QUESTION2A7" name="S2G" type=
"checkbox" value="7"></label>
</td>
<td width="15%">
<div class="c2">
<label class="c4" for="QUESTION2A7">Sunday</label>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var num_checked = $("input[type=checkbox]:checked").length;
if (num_checked > 4) {
alert("sorry, you have already selected more than max !" );
$(e.target).attr('checked',false);
}
});
</script>
<table class="c2">
<tr>
<td>
<div class="c5">
<label class="c5"><button type="submit"><label class=
"c5">NEXT</label></button></label>
</div>
</td>
</tr>
</table>
<div class="c9">
<label>1</label>
</div>
<p id="demo">
</p>
If more than 2 checkboxes has been checked I want to disable the first question's checkboxes and it's working but my main problem is, If it happens it block to select all of the checkboxes on the same page.But you have to check less than 4 for question two.
if you target input[type=checkbox] then it will point to every check box in the DOM
so i made the name of all checkbox's in each question to be same
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />
<meta http-equiv="content-type" content="text/html; charset=windows-1254" />
<meta http-equiv="content-type" content="text/html; charset=x-mac-turkish" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/styles/_reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/styles/main3.css" />
</head>
<body>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<div id="Page1">
<p><strong><em>(*) 1 ) Page 1 Question 1</em></strong></p>
</div>
<br></br>
<br></br>
<div id="Checklist1B7">
<table class="c1">
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S1" id="QUESTION1A1" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A1" class="c4">
Strongly Disagree</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S1" id="QUESTION1A2" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A2" class="c5">
Disagree</label>
</div>
</td>
<td width="1%">
<label class="c3">
<input type="checkbox" name="S1" id="QUESTION1A3" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A3" class="c6">
Undecided</label>
</div>
</td>
</tr>
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S1" id="QUESTION1A4" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A4" class="c4">
Agree</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S1" id="QUESTION1A5" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION1A5" class="c5">
Strongly Agree </label>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var QUS1 = $("input[name=S1]:checked").length;
if (QUS1 > 2) {
alert("sorry, you have already selected more than max !");
$(e.target).attr('checked', false);
}
var QUS2 = $("input[name=S2]:checked").length;
if (QUS2 > 4) {
alert("sorry, you have already selected more than max !");
$(e.target).attr('checked', false);
}
});
</script>
<p><strong><em>2 ) Page 1 Question 2</em></strong></p>
</div>
<br></br>
<br></br>
<div id="Checklist2B7">
<table class="c1">
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S2" id="QUESTION2A1" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A1" class="c4">
Monday</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S2" id="QUESTION2A2" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A2" class="c5">
Tuesday</label>
</div>
</td>
<td width="1%">
<label class="c3">
<input type="checkbox" name="S2" id="QUESTION2A3" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A3" class="c6">
Wednesday</label>
</div>
</td>
</tr>
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S2" value="4" id="QUESTION2A4" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A4" class="c4">
Thursday</label>
</div>
</td>
<td width="1%">
<label class="c2">
<input type="checkbox" name="S2" id="QUESTION2A5" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A5" class="c5">
Friday</label>
</div>
</td>
<td width="1%">
<label class="c3">
<input type="checkbox" name="S2" id="QUESTION2A6" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A6" class="c6">
Saturday</label>
</div>
</td>
</tr>
<tr>
<td width="1%">
<label class="c1">
<input type="checkbox" name="S2" value="7" id="QUESTION2A7" />
</label>
</td>
<td width="15%">
<div class="c2">
<label for="QUESTION2A7" class="c4">
Sunday</label>
</div>
</td>
</tr>
</table>
</div>
<table class="c2">
<tr>
<td>
<div class="c5">
<label class="c5">
<button type="submit">NEXT
</button>
</label>
</div>
</td>
</tr>
</table>
<div class="c9">
<label>1</label>
</div>
</form>
<p id="demo"></p>
</div>
</form>
</body>
</html>
I have 23 checkboxes. Each of them has a value. When the user checks the checkbox, its value will be added to the grandtotal and will show in a text box. If not checked, it will not be added. My problem is, it does not add. It only shows the value of the last checked checkbox. How can I add all the values that are checked?
this is the jquery for my checkboxes.
function tblcheckboxes(cb){
var a=0;
var total = 0;
if (cb.is(":checked")) {
a = parseFloat(cb.val(), 10);
total += a;
}else{
total -= a;
}$('.txt7').val(total.toFixed(2));
}
$(document).ready(function(){
$('[id^="tcbx"]').click(function(){
var cb = $(this);
tblcheckboxes(cb);
grandtotal(cb);
});
});
You need to set the value of total as the value of the total element
function tblcheckboxes(cb) {
var total = 0;
$('input.amount').filter(':checked').each(function() {
total += (+this.value || 0);
});
$('.txt7').val(total.toFixed(2));
}
$(document).ready(function() {
$('input.amount').click(function() {
var cb = $(this);
tblcheckboxes(cb);
grandtotal(cb);
});
});
function ChangeColColor() {}
function grandtotal() {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tblPackage">
<thead>
<tr style="text-align: center;">
<td width="30%"></td>
<td width="1%"></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY</div><span class="s11">$49</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
</td>
</tr>
</thead>
<tbody>
<colgroup>
<col id="colA" />
<col id="colB" />
<col id="colC" />
<col id="colD" />
<col id="colE" />
</colgroup>
<tr>
<td style="text-align: left;">
<h5>Choose Package</h5>
</td>
<td></td>
<td>
<center>
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox amount" data-col="colC" onclick="ChangeColColor(this,'colC')" />
<label for="tcbx1" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox amount" data-col="colD" onclick="ChangeColColor(this,'colD')" />
<label for="tcbx2" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox amount" data-col="colE" onclick="ChangeColColor(this,'colE')" />
<label for="tcbx3" class="css-label"></label>
</center>
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx" class="css-checkbox amount" />
<label for="tcbx" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
<td width="30%">
<lbl id="lblBtn" />
</td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx4" value="19.00" class="css-checkbox amount" />
<label for="tcbx4" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
<td width="30%"></td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx5" value="49.00" class="css-checkbox amount" />
<label for="tcbx5" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
<td width="30%"></td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx6" value="75.00" class="css-checkbox amount" />
<label for="tcbx6" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
Total:
<input type="text" class="txt7" />
I have added a class amount to those input fields which has to trigger a total change