Change all the dropdown option' s value when the checkbox is checked - javascript

I'm wondering when i check the checkbox (Select all), can all the dropdowns be forced to select "Y"
if it's unchecked, all the dropdowns will be forced to select "N"
Many thanks.
var check = $('#check');
check.onclick(function(){
$('.option') = "Y";
})
<table id="table">
<th>
select all <input type="checkbox" id="check">
</th>
<tr>
<td>
<select class="option status">
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="option status">
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
Orginally i have a table that show the total amount needs to be paid and payment in arrears
$(document).ready(function() {
$("#table").on('input', '.txtCal, .status', function() {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
var to_be_paid = 0;
$("#table tr").each(function() {
var get_textbox_value = $('.txtCal', this).val();
var get_payment_status = $('.status', this).val();
if (get_textbox_value && get_payment_status) {
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
if (get_payment_status === 'N') {
to_be_paid += parseFloat(get_textbox_value);
}
}
});
$(".total_sum_value").html(calculated_total_sum);
$(".arrears").html(to_be_paid);
}
calculate();
});
HTML
<div class="col-lg-6 result">
<div class="input-group">
<p>
<span class="input-group-addon">Total Payment</span>
<span class="input-group-addon">$HKD</span>
<span class="input-group-addon total_sum_value"></span></p>
<br><br><br>
<p>
<span class="input-group-addon">In Arrears</span>
<span class="input-group-addon">$HKD</span>
<span class="input-group-addon arrears"></span></p>
</div>
Each table row will have a select dropdown that consists of two option "Y" and "N". Originally, i have to manually change its table row option, and the payment in arrears will change accordingly.
For example, if the dropdown is "Y" which means paid, the amount of payment in arrears will decrease automatically.
Now after adding the select all function, to force all dropdowns to select "Y",for some reason the calculate function fail to work.
Any ideas

Add a common class to all the select and value to the option. Trigger a function on checking the checkbox which will select all Y option.Use jquery 'prop' method to add the property
function selectAll(elem) {
if ($(elem).prop('checked')) {
$('.selOptions option[value=Y]').prop('selected', true);
} else {
$('.selOptions option[value=N]').prop('selected', true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>
select all <input type="checkbox" onchange="selectAll(this)">
</th>
<tr>
<td>
<select class="selOptions">
<option value = "Y">Y</option>
<option value = "N">N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="selOptions">
<option value = "Y">Y</option>
<option value = "N">N</option>
</select>
</td>
</tr>
</table>

Using vainilla JS
<table>
<th>
select all <input id="selectAll" type="checkbox" />
</th>
<tr>
<td>
<select>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
</table>
<script>
var selectAll = document.getElementById('selectAll');
var options = document.getElementsByTagName('select');
selectAll.addEventListener( 'change', function() {
if(this.checked) {
for(var i=0; i < options.length; i++) {
options[i].selectedIndex = 0;
}
}
});
</script>

First determine when the checkbox is checked or not.
$('#check').on('change', function() { if ($(this).is(':checked')) {...
Then you could use a selector based on an option's text content (you don't have a value attribute which you should but it's still functional.)
$('option:contains(Y)')...
Then use .prop() method to programmatically change it's selected state.
.prop('selected', true);
Demo
$('#check').on('change', function() {
if ($(this).is(':checked')) {
$('option:contains(Y)').prop('selected', true);
} else {
$('option:contains(N)').prop('selected', true);
}
});
<table>
<th>
select all <input type="checkbox" id="check">
</th>
<tr>
<td>
<select class="option">
<option>--</option>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="option">
<option>--</option>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Related

How check condition of checkbox when uncheck/check with id of HTML

I'm using css and javascript to check condition of value of partner Code is null and 01
If user checks checkbox is PARTNER, value of partnerName '01 - Elite' and value of partnerCode is '01' will send when submit
If user unchecks checkbox is PARTNER, value of partnerName is 'NULL' and value of partnerCode is 'NULL' will send when submit
This is my code:
<tr>
<th scope="row">Partner</th>
<td colspan="0" style="margin-top: 4px;">
<input id="parnerNameCheck" name="parnerNameCheck" type="checkbox"/><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName" disabled>
<option value="" selected>Choose One</option>
<option>01 - Elite</option>
</select>
</td>
<td>
<input id="partnerCode" name="partnerCode" type="hidden" value="01" />
</td>
</tr>
<script>
$('#parnerNameCheck').click(function() {
console.log('parnerNameCheck checked:' + $("#parnerNameCheck").is(":checked"));
$('#partnerName').prop("disabled", !$(this).prop("checked"));
$('#partnerCode').prop("disabled", !$(this).prop("checked"));
});
</script>
UPDATED:
$('#parnerNameCheck').click(function() {
console.log('parnerNameCheck checked:' + $("#parnerNameCheck").is(":checked"));
$('#partnerName').prop("disabled", !$(this).prop("checked"));
$('#partnerCode').prop("disabled", !$(this).prop("checked"));
$("#partnerCode").val('');
});
But when I uncheck checkbox is PARTNER, value of partnerCode is 01 still sending when submit.
So how to fix the problem? thank a lot
set $("#partnerCode").val('');
$('#parnerNameCheck').click(function() {
console.log('parnerNameCheck checked:' + $("#parnerNameCheck").is(":checked"));
$('#partnerName').prop("disabled", !$(this).prop("checked"));
$('#partnerCode').prop("disabled", !$(this).prop("checked"));
$("#partnerCode").val('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th scope="row">Partner</th>
<td colspan="0" style="margin-top: 4px;">
<input id="parnerNameCheck" name="parnerNameCheck" type="checkbox"/><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName" disabled>
<option value="" selected>Choose One</option>
<option>01 - Elite</option>
</select>
</td>
<td>
<input id="partnerCode" name="partnerCode" type="hidden" value="01" />
</td>
</tr>
I believe you are missing the ability to toggle the value of partnerCode. Your updated code would only set the value of parnetCode to null and that's it.
Below is the code that would switch the values for partnerCode:
$('#parnerNameCheck').click(function() {
console.log('parnerNameCheck: ' + $("#partnerCode").val());
$('#partnerName').prop("disabled", !$(this).prop("checked"));
$('#partnerCode').prop("disabled", !$(this).prop("checked"));
// Declare variables
var partnerCode = $("#partnerCode");
var partnerCodeVal = partnerCode.val();
// Apply condition to $("#partnerCode").val()
// that will switch between values
partnerCode.val(partnerCodeVal === "01" ? "" : "01");
});
Working example - https://jsfiddle.net/ma4orbnw/1/

Jquery Checkbox not changing

the issues is that if you check and then uncheck the vacancy_select checkbox, then check the selection checkbox it doesn't change the vacancy_select check status
I have a few checkboxes on screen, the first checkbox $("input[type=checkbox]#selection") will toggle all other checkboxes, on or off depending on the status of the first checkbox.
$('input[type=checkbox]#selection').on('change', function () {
let rows = $("tr.content_list > td > input[type=checkbox].vacancy_select");
for(let i=0; i < rows.length; i++){
$(rows[i]).attr('checked', this.checked);
}
});
if, I select or change the status of any of the other checkboxes then these checkboxes
$("tr.content_list > td > input[type=checkbox].vacancy_select") don't updated when marking this $("input[type=checkbox]#selection") checkbox as checked.
$('input[type=checkbox]#selection').on('change', function() {
let rows = $("input[type=checkbox].vacancy_select");
for (let i = 0; i < rows.length; i++) {
$(rows[i]).attr('checked', this.checked);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="list_table" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>
<input type="checkbox" id="selection" name="selection">Selection
</th>
</tr>
<tr>
<td class="na">
<a class="btn btn-primary" href="{{ asset('/dashboard/vacancy/add')}}" style="color: #FFF">New Vacancy</a>
</td>
</tr>
</thead>
<tr class="content_list">
<td>
<input type="checkbox" class="vacancy_select" data-vacancy-id="{{ $vacancy->id }}">
</td>
</tr>a
<tr class="content_list">
<td>
<input type="checkbox" class="vacancy_select" data-vacancy-id="{{ $vacancy->id }}">
</td>
</tr>a
<tr class="content_list">
<td>
<input type="checkbox" class="vacancy_select" data-vacancy-id="{{ $vacancy->id }}">
</td>
</tr>
</table>
You have to use .prop() for this, also you don't need for loop to set the attribute/prop: here is a fiddle and a working snippet:
$('input[type=checkbox]#selection').on('change', function() {
let rows = $("input[type=checkbox].vacancy_select");
rows.prop('checked', this.checked);
});
$('input[type=checkbox].vacancy_select').on('change', function() {
let selectedRows = $("input[type=checkbox].vacancy_select:checked").length;
let allElements = $('input[type=checkbox].vacancy_select').length;
let checked = false;
if(selectedRows === allElements) {
checked = true;
}
$('input[type=checkbox]#selection').prop('checked', checked)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="selection" name="selection">Selection
<input type="checkbox" class="vacancy_select" data-vacancy-id="1">
<input type="checkbox" class="vacancy_select" data-vacancy-id="2">
<input type="checkbox" class="vacancy_select" data-vacancy-id="3">
<input type="checkbox" class="vacancy_select" data-vacancy-id="4">

How to enable Dropdownlist by Checkbox in multirow table using JavaScript HTML

I want to control the dropdownlist to be enabled when the checkbox is checked by respective rows.
My current progress I manage to enable and disable the dropdownlist but its not controlled by the respective rows.
Whenever the checkbox is checked, all dropdownlist were enabled.
the php code is partly from html:
<td>
<select class="selection" name="lotDist[]" >
<option></option>';
==== sql queries in here ====
while ($row2 = sqlsrv_fetch_array($stmt,SQLSRV_FETCH_ASSOC))
{
echo '
<option value="'.$row["LotNo"].' / '.$row2["Grouping"].' - '.$row2["InBulkForm"].'">
'.$row2["Grouping"].' - '.$row2["InBulkForm"].'</option> ';
}
echo '
</select>
</td>
<td>'.$row["LoadingWeek"].'</td>
<td>
<input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row["LotNo"].'" '.$check.'>
</td>
<script>
$(document).ready(function() {
$('.selection').attr('disabled', 'disabled');
var $checkBox = $('.chkBox');
$checkBox.on('change', function(e) {
//get the previous element to us, which is the select
var $select = $('.selection')
if (this.checked) {
$select.removeAttr('disabled');
} else {
$select.attr('disabled', 'disabled');
}
});
});
</script>
With $(this).closest('tr').find('.selection'); you can find the corresponding select box the belongs to the row of the changed checkbox.
The closest() function finds the first parent that matches the selector. Since you are using a table we can select the row with the tr selector and find the corresponding select element within the row.
Also changed the way the select box is enabled and disabled. It's better to change the property then the attribute. and code is shorter too. However your method works as well.
$(document).ready(function() {
$('.selection').attr('disabled', 'disabled');
var $checkBox = $('.chkBox');
$checkBox.on('change', function(e) {
var $select = $(this).closest('tr').find('.selection');
$select.prop('disabled', !this.checked);
/* This works too but its better to change the property and the code is shorter when using the this.checked boolean.
if (this.checked) {
$select.removeAttr('disabled');
} else {
$select.attr('disabled', 'disabled');
}
*/
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select class="selection" name="lotDist[]">
<option>1</option>
<option>2</option>
</select>
</td>
<td>week</td>
<td>
<input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row[" LotNo "].'" '.$check.'>
</td>
</tr>
<tr>
<td>
<select class="selection" name="lotDist[]">
<option>1</option>
<option>2</option>
</select>
</td>
<td>week</td>
<td>
<input type="checkbox" class="chkBox" id="chkBox" name="cBox[]" value="'.$row[" LotNo "].'" '.$check.'>
</td>
</tr>
</table>

Clone tr and checkbox event in jQuery

I have to clone my <tr> and I have list of checkbox like code below and when I add new row with list of checkbox and then I click on check box to show value in textbox field_resultsthe value not show only on first textbox not yet clone.
How when I add new tr and then when I click on which list of checkbox in which tr they will show value of my click in the same tr.
$("#add-new").on("click", function () {
$tr = $(this).closest("tr").next().clone(true);
$tr.insertAfter($(this).closest("tr"));
});
$(document).ready(function () {
$checks = $('#mych_box :checkbox');
$checks.on('change', function () {
var string = $checks.filter(":checked").map(function (i, v) {
return this.value;
}).get().join(",");
console.log(string);
$('#field_results').val(string);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<button type="button" id="add-new">Add New</button>
</td>
</tr>
<tr>
<td>
<input type="text" id="field_results" name="field_results[]"/><br>
<div class="multiselect" style="height: 100px;width: auto;" id="mych_box">
<label>
<input type="checkbox" id="virt_software_chb1" name="virt_software[]" value="White"/>White
<input type="checkbox" id="virt_software_chb2" name="virt_software[]" value="Red"/>Red
<input type="checkbox" id="virt_software_chb3" name="virt_software[]" value="Blue"/>Blue
</label>
</div>
</td>
</tr>
As defined above use true in clone to bind default events and use class instead of id to group element
$(".virt_software_chb").on('change', function () {
var string = $(this).closest('td').find('.virt_software_chb').filter(":checked").map(function (i, v) {
return this.value;
}).get().join(",");
$(this).closest('td').find('.field_results').val(string);
});
$("#add-new").on("click", function () {
$tr = $(this).closest("tr").next().clone(true);
$tr.insertAfter($(this).closest("tr"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button type="button" id="add-new">Add New</button>
</td>
</tr>
<tr>
<td>
<input type="text" class="field_results" name="field_results[]"/><br>
<div class="multiselect" style="height: 100px;width: auto;" id="mych_box">
<label>
<input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White
<input type="checkbox" class="virt_software_chb" name="virt_software[]" value="Red"/>Red
<input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White
</label>
</div>
</td>
</tr>
</table>
withDataAndEvents (default: false)
A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well. - clone()
Try passing in true and see what you get.
$tr = $(this).closest("tr").next().clone(true);

Use $(this) instead of an ID in javaScript

Is there any solution to use $(this) instead of and ID in option select in javaScript?
var tot = 5 * ($( "#firstOne option:selected" ).text());
In the example above, I want to use $(this) instead of #firstOne, in order to be able using this function for multiple option select.
UPDATE
jsFiddle
$(document).ready(function() {
document.getElementById("totalPrice").innerHTML = 0 + " €";
});
function addToPrice() {
var tot = $("#totalPrice").val();
tot = 5 * ($(this).find("option:selected").text());
tot = tot + " €"
document.getElementById("totalPrice").innerHTML = tot;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div>
<table class="itemList">
<tr>
<td style="width: 170px">
<span>Arancina Pistacchio</span>
</td>
<td>
<span style="margin-left: 110px;">2.5 €</span>
</td>
<td>
<select style="margin-left: 30px" onChange="addToPrice();">
<option value="one">0</option>
<option value="two">1</option>
<option value="three">2</option>
<option value="four">3</option>
</select>
</td>
</tr>
</table>
</div>
<div>
<table class="itemList">
<tr>
<td style="width: 170px">
<span>Arancina Melanzana</span>
</td>
<td>
<span style="margin-left: 110px;">2.5 €</span>
</td>
<td>
<select style="margin-left: 30px">
<option value="one">0</option>
<option value="two">1</option>
<option value="three">2</option>
<option value="four">3</option>
</select>
</td>
</tr>
</table>
</div>
<div class="totPrice">Total :</div>
<div class="totPrice" style="font-size: 20px; font-family: Helvetica" id="totalPrice"></div>
I got if what you mean. Use like following:
var tot = 5 ;
$( "option:selected" ).each(function(){
tot = tot * $(this).text();
});
Is there any solution to use $(this) instead of and ID in option
select in javaScript?
Yes, try
var tot = 5 * ( $(this).find("option:selected" ).text());
You needed to do multiple things in your fiddle
Select No Wrap - In Head option
Select jQuery version
Pass the current object this as the argument to the function.
you can use
$( "option:selected",this ).text()
DEMO

Categories