I have an issue with my code. How to substract checkbox value when combobox change. I hope anybody here can help me.
Here is my js code:
//javascript for adding checkbox value and display in text.
<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function(e){
$('#txtInput').val($(this).val())
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i,ch) {
total += parseFloat($(this).val());
});
$("#txtInput").val(total);
});
});
</script>
//javascript for substract checkbox value when combobox change
<script>
$(document).ready(function(){
$('.xyz').change(function(){
var tmp = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var substract = 0;
$('#'+tmp+'').prop("checked",false)+(substract -= parseFloat($('#'+tmp+'').val()));
$("#txtInput").val(substract);
});
});
And here is my HTML code:
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td><select class="xyz" name="xyz1" id="xyz1"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check1" id="check1" value="1" /></td>
<td>French Fries</td>
</tr>
<tr>
<td><select class="xyz" name="xyz2" id="xyz2"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check2" id="check2" value="3" /></td>
<td>Pizza</td>
</tr>
<tr>
<td><select class="xyz" name="xyz3" id="xyz3"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check3" id="check3" value="5" /></td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
First, if I select "Take" in combobox and click checkbox the value will be shown into text.
Second, if I do it again the checkbox will be add the value and show the result into text.
Third, this my problem. If I change combobox into "Cancel" the checkbox only uncheck but can't decrease the value. I want if I change combobox into "Cancel" the value decrease according checkbox selection value and checkbox uncheck.
For any help, I really appreciate it. Thanks.
Make a common function which will read the state of the input elements and do the calculations accordingly.
.parents(selector) will traverse up and will returned matched element.
Try this:
var doCalc = function() {
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i, ch) {
if ($(this).parents('tr').find('select option:selected').text() == 'Take') {
total += parseFloat($(this).val());
}
});
$("#txtInput").val(total);
}
$('input[type=checkbox]').change(doCalc);
$('.xyz').change(function() {
if ($(this).find('option:selected').text() == 'Cancel') {
$(this).parents('tr').find('input[type="checkbox"]').prop('checked', false);
}
doCalc();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td>
<select class="xyz" name="xyz1" id="xyz1">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" id="check1" value="1" />
</td>
<td>French Fries</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz2" id="xyz2">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" id="check2" value="3" />
</td>
<td>Pizza</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz3" id="xyz3">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" id="check3" value="5" />
</td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
Fiddle here
Related
<table class="table borderless">
<thead>
<tr>
<th>Rank</th>
<th>+/-</th>
<th>Searches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="[0,1000]" data-slider-id="RC" id="R"/></td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 1-10</td>
<td><input type="checkbox" > Up</td>
<td><input type="checkbox" > Over</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 11-20</td>
<td><input type="checkbox" > Down</td>
<td><input type="checkbox" > Under</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 21-100</td>
<td><input type="checkbox" > No movement</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Not in top 100</td>
</tr>
</tbody>
</table>
Script:
$(document).ready(function () {
$(".custom").change(function () {
$(".custom").parent().find(".custom-selector").prop("checked", true);
})
});
What I need is a radio button that checks all the boxes when selected.
Right now nothing happens when I click the radio button. However, if I add this radio button:
<input type="radio" id="op5" value="1" name="options2" class="custom">
Then they both work. Even the initial one checks all the boxes.
What is this strange behavior? I'm missing something
EDIT: it appears the radio button must be outside the table? Can I have it inside somehow?
try:
$(".custom").closest("tbody").find(".custom-selector").prop("checked", true);
or Just:
$(".custom-selector").prop("checked", true);
Try this:
$(".custom").change(function () {
$(this).parents('tbody').find(".custom-selector:checked");
});
and some reference: https://api.jquery.com/checked-selector
eventually remove your action selector using .not(this)
Try this :
$(document).ready(function () {
$(".custom").change(function () {
$(".custom-selector").prop("checked", true);
})
});
I have trouble to create a script that deselect a chebock when the other on the same line is selected
function uncheck1(){
document.getElementById("check1").checked = true;
document.getElementById("check2").checked = false;
document.getElementById("select").disabled = true;
}
function uncheck2(){
document.getElementById("check1").checked = false;
document.getElementById("check2").checked = true;
document.getElementById("select").disabled = false;
}
<form name="form" action="action.php" method="post">
<table>
<tr>
<td>
<input type="hidden" value="Carrizo J." name="player[]" />
</td>
<td>
<label>Carrizo J.</label>
</td>
<td>
<input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="Handanovic S." name="player[]" />
</td>
<td>
<label>Handanovic S.</label>
</td>
<td>
<input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</form>
As well as, obviusly, it works only the first line.
If I check the right one, the left one is unchecked and the select is enabled.
Then if I check the left one, the right one is unchecked and select is disabled.
Is there a way to be able to do the same things to other 24 lines, without having to write 2 functions for each?
Try this code
window.onload = function() { // when page loaded
var checks = document.querySelectorAll("input[name='titolare[]']");
for (var i = 0; i < checks.length; i++) { // assign to each checkbox
checks[i].onclick = function() {
var row = this.parentElement.parentElement, // the TR
checks = row.querySelectorAll("input[type=checkbox]"), // All checkboxes
sel = row.querySelector("select"); // the select in the row
sel.disabled = this.value == "0"; // whatever you clicked
checks[0].checked = this.value == "0";
checks[1].checked = this.value == "1";
}
}
}
<form name="form" action="action.php" method="post">
<table>
<tr>
<td>
<input type="hidden" value="Carrizo J." name="player[]" />
</td>
<td>
<label>Carrizo J.</label>
</td>
<td>
<input id="check1" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="Handanovic S." name="player[]" />
</td>
<td>
<label>Handanovic S.</label>
</td>
<td>
<input id="check1" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</form>
You can replace the checkboxes with radio buttons but need to name each pair separately, e.g. using the name in the label. You can keep the existing scheme of checkboxes if you are sure the script will run on the client.
One approach is to dynamically add the click listeners and at the same time, add an index to each checkbox using a data- attribute. When a checkbox with an even index is clicked, uncheck the next odd one. If one with an odd index is clicked, uncheck the previous even one.
A similar scheme can be used for the selects, except you don't need a data- attribute as long as there are only selects matched to checkbox pairs. I've slimmed down the HTML a bit…
E.g.
function updateSelect(){
var idx = this.dataset.index;
// Uncheck related checkbox. If this one's index
// is even, uncheck next, otherwise previous
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes[idx % 2? idx - 1 : +idx +1 ].checked = false;
// Get the select elements
var selects = document.querySelectorAll('select');
// Find related select based on checkbox index
var selIdx = Math.floor(idx/2);
// Disable based on whether related checkbox index is odd or even
selects[selIdx].disabled = !(idx%2);
}
window.onload = function(){
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
[].forEach.call(checkboxes,function(cb, idx) {
cb.addEventListener('click', updateSelect, false);
// Add in index to each checkbox so it's easy to find the previous or next
cb.dataset.index = idx;
})
}
<form name="form">
<table>
<tr>
<td><input type="hidden" value="Carrizo J." name="player[]">
<td><label>Carrizo J.</label>
<td><input type="checkbox" name="titolare[]" value="0" checked>
<td><input type="checkbox" name="titolare[]" value="1">
<td><select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
<tr>
<td><input type="hidden" value="Handanovic S." name="player[]">
<td><label>Handanovic S.</label>
<td><input type="checkbox" name="titolare[]" value="0" checked>
<td><input type="checkbox" name="titolare[]" value="1">
<td><select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</table>
</form>
Note that NodeLists are now iterable, so you in some hosts instead of:
[].forEach.call(checkboxes, function(checkbox, index){...})
you could do:
checkboxes.forEach(function(checkbox, index){...})
But support may be lacking in many browsers in use (for the time being).
I believe this is pretty much what you're looking for, and I think the changes are self-explanatory:
function checkChange(elem) {
var elemRoot = elem.parentNode.parentNode;
elemRoot.querySelectorAll("select[name='ordine[]']")[0].disabled = !elemRoot.getElementsByClassName('memberRadio2')[0].checked;
}
<form name="form" action="action.php" method="post">
<table>
<tr>
<td>
<input type="hidden" value="Carrizo J." name="player[]" />
</td>
<td>
<label for="titolare1">Carrizo J.</label>
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare1" value="0" checked="" />
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare1" value="1" class="memberRadio2" />
</td>
<td>
<select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="Handanovic S." name="player[]" />
</td>
<td>
<label for="titolare2">Handanovic S.</label>
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare2" value="0" checked="" />
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare2" value="1" class="memberRadio2" />
</td>
<td>
<select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</form>
Note: You will need to change the logic on the server side to make use of the multiple radio values (indexed using separate names).
I have a table like this:
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
And I want to get the hidden value in the same td as the checked checkbox.
I tried this:
$("#TempTable tr input:checkbox:checked").each(function(){
alert($("#"+this.id).parent("td").child("input:hidden").val());
});
Of course, after I get value what I want, I will save it to an Array.
Not sure why the values are not on the checkbox, it would simplify the code.
But With your code, you would just use next and map.
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return $(this).next().val();
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
and as I said before putting the values on the checkbox simplify's it
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return this.value;
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1" value="1"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2" value="2"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3" value="3"/>
</td>
</tr>
</table>
Try this:
$("input[type='checkbox']").each( function (){
var value = $(this).parent().find("input:hidden").val();
// this will return the value of each hidden field
});
You can use siblings and input type hidden to get the value.
$("#TempTable tr input[type=checkbox]:checked").each(function(){
$(this).siblings('input[type=hidden]').val()
});
I am trying to show text box on the row clicked by hiding the labels of the clicked row and on button click the text box data should be printed on a "showresult" Div
My problem is am not able to hide and show the textbox i have gathered a script which change the color but am not sure how to hide and show the text box and print the data.
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('background', 'red');
}
else {
$(this).css('background', 'white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td><label>data1</label> <input type="text" value="1" /></td>
<td><label>data2</label> <input type="text" value="2" /></td>
<td><label>data3</label> <input type="text" value="3" /></td>
<td><label>data4</label> <input type="text" value="4" /></td>
<td><label>data5</label> <input type="text" value="5" /></td>
</tr>
<tr>
<td><label>data6</label> <input type="text" value="6" /></td>
<td><label>data7</label> <input type="text" value="7" /></td>
<td><label>data8</label> <input type="text" value="8" /></td>
<td><label>data9</label> <input type="text" value="9" /></td>
<td><label>data10</label> <input type="text" value="10" /></td>
</tr>
</table>
<input type="button" value="printdata"/>
<div id="showresult"></div>
Say i have two rows, The textbox will be hidden and the label will be
available as a display when a user click on a selected row the label
should be hidden and the text box should be visible and after that if
the user clicks on the button then the data or the clicked row textbox
value should be printed #showresult
Try utilizing .toggle() to display , not display label , input elements within tr clicked element ; create variable index corresponding to tr element clicked ; at click of #printdata , iterate
tr at index using .each() , create an object having property of label , value of input , set #showresult html to created object
$(document).ready(function() {
var index = null;
$("tr").click(function() {
$("input, label", this).toggle();
index = $(this).index("tr");
});
$("input[type=button]").click(function() {
var obj = {};
var elems = $("tr").eq(index).find("label, input");
elems.each(function(i, el) {
if ($(el).is("label")) {
obj[el.textContent] = elems[i + 1].value
}
});
$("#showresult").html("<pre>" + JSON.stringify(obj, null, 2) + "</pre>")
})
});
tr td input {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tbody>
<tr style="background:transparent">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td>
<label>data1</label>
<input type="text" value="1" />
</td>
<td>
<label>data2</label>
<input type="text" value="2" />
</td>
<td>
<label>data3</label>
<input type="text" value="3" />
</td>
<td>
<label>data4</label>
<input type="text" value="4" />
</td>
<td>
<label>data5</label>
<input type="text" value="5" />
</td>
</tr>
<tr>
<td>
<label>data6</label>
<input type="text" value="6" />
</td>
<td>
<label>data7</label>
<input type="text" value="7" />
</td>
<td>
<label>data8</label>
<input type="text" value="8" />
</td>
<td>
<label>data9</label>
<input type="text" value="9" />
</td>
<td>
<label>data10</label>
<input type="text" value="10" />
</td>
</tr>
</tbody>
</table>
<input type="button" value="printdata" />
<div id="showresult"></div>
My function is
If I choose the first (second or last) option, the rest option will be disabled and reset as null and all values in the selected option will be enabled as my Javascript below.
Moreover, I would like to disable textboxs as the left-hand side below whenever the taxi option has been selected.
Demo
HTML:
<table>
<tr>
<td>
<input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="abc" value="car" />Car</td>
<td>
<input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
<td>
<input type="checkbox" />Taxi</td>
</tr>
</table>
Javascript:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
$('#' + valueSelected).find(':text').prop('disabled', false).val('').removeClass('readonly').closest('tr').siblings('tr.set_width').find(':text').prop('disabled', true).addClass('readonly');
$('#' + valueSelected).find(':checkbox,:radio').prop('disabled', false).closest('tr').siblings('tr.set_width').find(':checkbox,:radio').prop('disabled', true);
});
do like this:
$('input.rdo').click(function(){
if(this.id == 'rdoTaxi')
{
$('.textbox').prop('disabled',true);
}
else
{
$('.textbox').prop('disabled',false);
}
});
Fiddle DEMO
Using your current function, you can actually remove a lot of the current code and just do the following:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
// your other code here ...
$('input[type="text"]').prop('disabled', valueSelected === 'taxi');
});
DEMO