How To Show Checked Checkbox Infomation Outside Div
I'm doing for cinema seating plan with php. I want to show to users what seat they selected and what price must pay in ticketinfo div with jquery on seat select and remove info whe
Solution 1:
You can listen to the change event of the checkboxes and create your result by looping over the checked elements.
$('.seatplan input[type=checkbox]').change(function() {
var result = [];
var total = 0;
$('.seatplan input[type=checkbox]:checked').each(function() {
result.push(`
<tr>
<td>${$(this).attr('name')}</td>
<td>${$(this).attr('value')}</td>
</tr>
`);
total += parseInt($(this).attr('value'), 10);
});
result.push(`
<tr>
<td>Total</td>
<td>${total}</td>
</tr>
`);
$('.ticketinfo tbody').html(result.join(''));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seatplan">
<input type='checkbox' name='A1' value='200'>
<input type='checkbox' name='A2' value='200'>
<input type='checkbox' name='A3' value='300'>
<input type='checkbox' name='A4' value='200'>
<input type='checkbox' name='A5' value='300'>
</div>
<table class="ticketinfo">
<thead>
<th>Seat No.</th>
<th>Amount</th>
</thead>
<tbody>
</tbody>
</table>I've changed the result section from div to table since it will be quite difficult to show row-column wise data in a div tag.
Solution 2:
As far as I understand, you want to do something like this?
$(document).on('change',':checkbox', function() {
if($(this).is(':checked')) {
$('.ticketinfo > ul > li:eq(0)').before('<li rel="' + $(this).attr('name') + '">seat no ' + $(this).attr('name') + ' - ' + parseInt($(this).val()) + '</li>');
$('.ticketinfo > ul > li > span').html(parseInt($('.ticketinfo > ul > li > span').text()) + parseInt($(this).val()));
} else {
$('[rel="' + $(this).attr('name') + '"]').remove();
$('.ticketinfo > ul > li > span').html(parseInt($('.ticketinfo > ul > li > span').text()) - parseInt($(this).val()));
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seatplan">
<input type='checkbox' name='A1' value='200'>
<input type='checkbox' name='A2' value='200'>
<input type='checkbox' name='A3' value='300'>
<input type='checkbox' name='A4' value='200'>
<input type='checkbox' name='A5' value='300'>
</div>
<div class="ticketinfo">
<ul>
<li>Total Amount <span>0</span></li>
</ul>
</div>Solution 3:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ticket Booking</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.book-chk').change(onSeatChengeEvt);
});
function onSeatChengeEvt(){
var total=0, infoHtml='', selItems=$('.book-chk:checked'), i, selLen=selItems.length;
for(i=0; i<selLen; i++){
infoHtml += 'seat no '+selItems[i].name+' '+selItems[i].value+'<br />';
total += Number(selItems[i].value);
}
infoHtml += '------------------------<br>Total Amount '+total;
$('#ticketInfo').html(infoHtml);
}
</head>
<body>
<div class="seatplan">
<label><input type='checkbox' class="book-chk" name='A1' value='200' autocomplete="off"> A1</label><br>
<label><input type='checkbox' class="book-chk" name='A2' value='200' autocomplete="off"> A2</label><br>
<label><input type='checkbox' class="book-chk" name='A3' value='300' autocomplete="off"> A3</label><br>
<label><input type='checkbox' class="book-chk" name='A4' value='200' autocomplete="off"> A4</label><br>
<label><input type='checkbox' class="book-chk" name='A5' value='300' autocomplete="off"> A5</label><br>
</div>
<div class="ticketinfo" id="ticketInfo"></div>
</body>
</html>
Post a Comment for "How To Show Checked Checkbox Infomation Outside Div"