如何在div之外显示选中的复选框信息 [英] How to show checked checkbox infomation outside div

问题描述

我正在用php为电影院座位计划做准备.我想向用户展示他们选择了哪个座位，必须在ticketinfo div中用jquery选择座位，并在取消选中时删除信息.

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 when they uncheck..

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

推荐答案

据我了解，您想做这样的事情吗?

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>

这篇关于如何在div之外显示选中的复选框信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！