Hi, I just starting learning javascript by myself and have quick question if anyone can help. I already checked recent post and couldn't find any similar one.
To get value of different check boxes and calculate value of those checked check boxes and show in the input field .It is working for default values more than one it doesn't work can anyone help? here id my code
To get value of different check boxes and calculate value of those checked check boxes and show in the input field .It is working for default values more than one it doesn't work can anyone help? here id my code
Code:
<html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript">
$(document).ready(function () {
var sumOfVals = 0;
$('#posscanner').click(function () {
$("#txtposscanner").toggle();
});
$('#surveillancecam').click(function () {
$("#txtsurveillancecam").toggle();
});
$('#lotteryscanner').click(function () {
$("#txtlotteryscanner").toggle();
});
$('#invoincescanner').click(function () {
$("#txtinvoincescanner").toggle();
});
$('#networkscanner').click(function () {
$("#txtnetworkscanner").toggle();
});
$('#txtposscanner').keyup(function () {
var txtscval = $("#txtposscanner").val();
var chkscval=$('#posscanner').val();
var dataps = txtscval * chkscval;
/* $('.chskboxva:checked').each(function () {
var data = $(this).val();
sumOfVals = sumOfVals + parseInt($(this).val());
});
var result = (txtscval * chkscval) + sumOfVals - chkscval;*/
$("#price").val(dataps);
});
$('#txtsurveillancecam').keyup(function () {
var txtscval = $("#txtsurveillancecam").val();
var chkscval = $('#surveillancecam').val();
var datassc = txtscval * chkscval;
$("#price").val(datassc);
});
$('#txtlotteryscanner').keyup(function () {
var txtscval = $("#txtlotteryscanner").val();
var chkscval = $('#lotteryscanner').val();
var datals = txtscval * chkscval;
$("#price").val(datals);
});
$('#txtinvoincescanner').keyup(function () {
var txtscval = $("#txtinvoincescanner").val();
var chkscval = $('#invoincescanner').val();
var datais = txtscval * chkscval;
$("#price").val(datais);
});
$('#txtnetworkscanner').keyup(function () {
var txtscval = $("#txtnetworkscanner").val();
var chkscval = $('#networkscanner').val();
var datans = txtscval * chkscval;
$("#price").val(datans);
});
/* var pizza_toppings = 0;
$('input[type="checkbox"]').on('click', function (e) {
if (this.checked) {
pizza_toppings += eval(this.value);
} else {
pizza_toppings -= eval(this.value);
}
$("#price").val(pizza_toppings);
});
});*/
var $inputs = $('input[type="checkbox"]')
$inputs.on('change', function () {
var sum = 0;
$inputs.each(function() {
// iterate and add it to sum only if checked
if(this.checked)
sum += parseInt(this.value);
});
$("#price").val(sum);
});
});
</script> </head> <body><p id="pizza_toppings"> <label class="lblitems"><input type="checkbox" class="chskboxva" id="posscanner" name="POS Scanner" value="2"> POS Scanner</label> <input class="txt" id="txtposscanner" style="width: 40px; display: none;" type="text" value="1" name="txt" /><br /> <label class="lblitems"><input type="checkbox" class="chskboxva" id="surveillancecam" name="Surveillance Camera" value="3"> Surveillance Camera</label> <input id="txtsurveillancecam" class="txt" style="width: 40px; display: none;" type="text" value="1" name="txt" /><br /> <label class="lblitems"><input type="checkbox" class="chskboxva" id="lotteryscanner" name="Lottery Scanner" value="4"> Lottery Scanner</label> <input id="txtlotteryscanner" class="txt" style="width: 40px; display: none;" type="text" value="1" name="txt" /><br /> <label class="lblitems"><input type="checkbox" class="chskboxva" id="invoincescanner" name="Invoice Scannerr" value="5"> Invoice Scannerr</label> <input id="txtinvoincescanner" class="txt" style="width: 40px; display: none;" type="text" value="1" name="txt" /><br /> <label class="lblitems"><input type="checkbox" class="chskboxva" id="networkscanner" name="Network Router" value="6"> Network Router</label> <input id="txtnetworkscanner" class="txt" style="width: 40px; display: none;" type="text" value="1" name="txt" /> </p> <p>
Calculated Price:
<input type="text" name="price" id="price" /> </p></body> </html>
Comment