Erfan Alam
Reputation: 19
change input value which is inside td upon chekcing checkbox on same tr
This is my code:
<table class="table" id="ptable" >
<thead>
<tr>
<th>CheckBoxes</th>
<th>SL</th>
<th>Product</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_9">
</td>
<td>1</td>
<td>Product-9
<input type="number" class="pmqty" id="qty_9" name="qty[]" value="18">
</td>
<td>50</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_10">
</td>
<td>2</td>
<td>Product-10
<input type="number" class="pmqty" id="qty_10" name="qty[]" value="20">
</td>
<td>100</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_15">
</td>
<td>3</td>
<td>Product-23
<input type="number" class="pmqty" id="qty_15" name="qty[]" value="199">
</td>
<td>150</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_18">
</td>
<td>1</td>
<td>Product-12
<input type="number" class="pmqty" id="qty_18" name="qty[]" value="67">
</td>
<td>200</td>
</tr>
</tbody>
</table>
I am looking for something which will do this: if you check a checkbox of a row, the value of input field inside the td will be zero, if uncheck again, the value will be restored.
this table if dynamically created so, I can use Id on every checkbox or every input field too.
Upvotes: 1
Views: 567
Answers (4)
Vlad Rovner
Reputation: 194
The shortest possible native JS solution:
document.querySelectorAll('input[type="checkbox"]').forEach((el)=>{
el.onclick = function() {
input = el.parentElement.parentElement.querySelector('input[type="number"]');
input.value != 0?input.setAttribute('data-val',input.value):0;
input.value = input.value == input.getAttribute('data-val')?0:input.getAttribute('data-val');
}});<table class="table" id="ptable" >
<thead>
<tr>
<th>CheckBoxes</th>
<th>SL</th>
<th>Product</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_9" >
</td>
<td>1</td>
<td>Product-9
<input type="number" class="pmqty" id="qty_9" name="qty[]" value="18">
</td>
<td>50</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_10">
</td>
<td>2</td>
<td>Product-10
<input type="number" class="pmqty" id="qty_10" name="qty[]" value="20">
</td>
<td>100</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_15">
</td>
<td>3</td>
<td>Product-23
<input type="number" class="pmqty" id="qty_15" name="qty[]" value="199">
</td>
<td>150</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_18">
</td>
<td>1</td>
<td>Product-12
<input type="number" class="pmqty" id="qty_18" name="qty[]" value="67">
</td>
<td>200</td>
</tr>
</tbody>
</table>Upvotes: 1
dale landry
Reputation: 8610
See description below in JS code... Basically create an event listener for each checkbox element. Then use the key from the input loop to identify the pmqty classes.
Save your initial values in an array for when the box is not clicked and set that in your conditional else...
let chkBox = document.querySelectorAll('.form-check-input');
let pmqty = document.querySelectorAll('.pmqty');
let pmqtyArr = [];
// get the values of the product input fields and place them in an array
pmqty.forEach((pmq)=>{
pmqtyArr.push(pmq.value);
})
// iterate over the checkboxes and establish a key and a value
chkBox.forEach((box, i) => {
// use the box value to add an eventlistener to each element
box.addEventListener('click',(e) => {
// conditional that checks the event target is checked
if(e.target.checked){
// if it is checked (true), set the other input classes value to '0'
pmqty[i].value = "0";
}else{
// else set the input classes value to the arrays value
pmqty[i].value = pmqtyArr[i];
}
})
})<table class="table" id="ptable">
<thead>
<tr>
<th>CheckBoxes</th>
<th>SL</th>
<th>Product</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_9">
</td>
<td>1</td>
<td>Product-9
<input type="number" class="pmqty" id="qty_9" name="qty[]" value="18">
</td>
<td>50</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_10">
</td>
<td>2</td>
<td>Product-10
<input type="number" class="pmqty" id="qty_10" name="qty[]" value="20">
</td>
<td>100</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_15">
</td>
<td>3</td>
<td>Product-23
<input type="number" class="pmqty" id="qty_15" name="qty[]" value="199">
</td>
<td>150</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_18">
</td>
<td>1</td>
<td>Product-12
<input type="number" class="pmqty" id="qty_18" name="qty[]" value="67">
</td>
<td>200</td>
</tr>
</tbody>
</table>Upvotes: 0
Da Mahdi03
Reputation: 1608
I am going to assume you have 20 products in order from 1 to 20 for this loop:
for (var i = 1; i <= 20; i++) {
var checkboxID = "#check_" + String(i);
var numberID = "#qty_" + String(i);
var checkbox = document.querySelector(checkboxID);
var number = document.querySelector(numberID);
number.setAttribute("hidden-number", number.value);
checkbox.addEventListener("click", () => {
if (number.value == 0) {
number.value = number.getAttribute("hidden-number");
}
else {
number.value = 0;
}
});
}
This program loops through all your numbers and checkboxes and stores the original value, then it sets up a toggle that will toggle the value based on the checkbox being clicked or not. I know it's not a conventional approach but that's my take on it.
Upvotes: 0
Bourbia Brahim
Reputation: 14712
Simple , check value of checkbox if clicked ,
if checked then use dom traversing closest() + find() to gt input , store value in data attribute (in order to reset it once uncheked) , then set value to 0
if unchecked restore value from data attrbiute already set .
$(".form-check-input").on('click', function() { let $input = $(this).closest('tr').find('.pmqty'); if ($(this).is(":checked")) { $input.data("prev-value", $input.val()); $input.val(0); } else { $input.val($input.data("prev-value")); } })
See below working snippet :
$(function() {
$(".form-check-input").on('click', function() {
let $input = $(this).closest('tr').find('.pmqty');
if ($(this).is(":checked")) {
$input.data("prev-value", $input.val());
$input.val(0);
//if($input.length)
} else {
$input.val($input.data("prev-value"));
}
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="ptable">
<thead>
<tr>
<th>CheckBoxes</th>
<th>SL</th>
<th>Product</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_9">
</td>
<td>1</td>
<td>Product-9
<input type="number" class="pmqty" id="qty_9" name="qty[]" value="18">
</td>
<td>50</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_10">
</td>
<td>2</td>
<td>Product-10
<input type="number" class="pmqty" id="qty_10" name="qty[]" value="20">
</td>
<td>100</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_15">
</td>
<td>3</td>
<td>Product-23
<input type="number" class="pmqty" id="qty_15" name="qty[]" value="199">
</td>
<td>150</td>
</tr>
<tr>
<td>
<input type="checkbox" class="form-check-input" id="check_18">
</td>
<td>1</td>
<td>Product-12
<input type="number" class="pmqty" id="qty_18" name="qty[]" value="67">
</td>
<td>200</td>
</tr>
</tbody>
</table>Upvotes: 0
Related Questions
- How to make child tr input checkbox value true in html table using jquery?
- Update an input if checkbox is selected on table row in javascript
- Get td value per tr upon clicking check box
- Change content of Input Field when checkBox is checked
- Changing values of inputs via checkbox change event
- Checkbox change not working correctly inside from html table and jquery
- Getting value of <td> according to checked checkbox
- how to change table data on checked row using jquery
- how to set a table cell to a value when next sibling td's checkbox is checked
- How to change value of input on click?