Question

我正在为php做电影院座位计划。我想向用户展示他们选择了哪个座位以及在座位选择中使用jquery在ticketinfo div中支付的价格，并在取消选中时删除信息。

    <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">
        seat no A1   200
        seat no A3   200
       -------------------
        Total Amount 400
    </div>

Answer 1

据我了解，你想做这样的事情吗？

＆＃13;

$(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()));
   }
});

＆＃13;

<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>

＆＃13;

Answer 2

您可以收听复选框的change事件，并通过循环选中已检查的元素来创建结果。

$('.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>

我已将结果部分从div更改为table，因为在div标记中显示行列明智的数据非常困难。

Answer 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+' &nbsp; &nbsp; '+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>

如何在div外显示已选中的复选框信息

3 个答案: