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(''));
});<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="seatplan"><inputtype='checkbox'name='A1'value='200'><inputtype='checkbox'name='A2'value='200'><inputtype='checkbox'name='A3'value='300'><inputtype='checkbox'name='A4'value='200'><inputtype='checkbox'name='A5'value='300'></div><tableclass="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()));
}
});<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="seatplan"><inputtype='checkbox'name='A1'value='200'><inputtype='checkbox'name='A2'value='200'><inputtype='checkbox'name='A3'value='300'><inputtype='checkbox'name='A4'value='200'><inputtype='checkbox'name='A5'value='300'></div><divclass="ticketinfo"><ul><li>Total Amount <span>0</span></li></ul></div>Solution 3:
<!doctype html><html><head><metacharset="utf-8"><title>Ticket Booking</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scripttype="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><divclass="seatplan"><label><inputtype='checkbox'class="book-chk"name='A1'value='200'autocomplete="off"> A1</label><br><label><inputtype='checkbox'class="book-chk"name='A2'value='200'autocomplete="off"> A2</label><br><label><inputtype='checkbox'class="book-chk"name='A3'value='300'autocomplete="off"> A3</label><br><label><inputtype='checkbox'class="book-chk"name='A4'value='200'autocomplete="off"> A4</label><br><label><inputtype='checkbox'class="book-chk"name='A5'value='300'autocomplete="off"> A5</label><br></div><divclass="ticketinfo"id="ticketInfo"></div></body></html>
Post a Comment for "How To Show Checked Checkbox Infomation Outside Div"