如何在div外显示选中复选框信息？PHP影院座位计划的jQuery实现

嘿，我来帮你搞定这个影院座位预订的交互功能！下面是完整的实现方案，完全适配你的需求，直接就能用在项目里：

第一步：完善HTML结构（可选但推荐） #

你原来的座位复选框没有直观显示座位号，用户体验不太友好，我给你补充了标签，同时调整了name属性方便后端统一接收（如果不想改动原结构，后面有备选代码）：

<div class="seatplan">
  <label><input type='checkbox' name='seat[]' value='A1|200'> A1 (¥200)</label>
  <label><input type='checkbox' name='seat[]' value='A2|200'> A2 (¥200)</label>
  <label><input type='checkbox' name='seat[]' value='A3|300'> A3 (¥300)</label>
  <label><input type='checkbox' name='seat[]' value='A4|200'> A4 (¥200)</label>
  <label><input type='checkbox' name='seat[]' value='A5|300'> A5 (¥300)</label>
</div>
<!-- 用来展示订单信息的容器 -->
<div id="ticketinfo" style="margin-top:20px; padding:15px; border:1px solid #ddd;">
  <h4>已选座位</h4>
  <div id="selected-seats">暂无选中座位</div>
  <div id="total-price" style="margin-top:10px; font-weight:bold;">总价：¥0</div>
</div>

第二步：jQuery交互实现 #

下面的代码会监听复选框的选中/取消事件，实时更新已选座位列表和总价：

$(document).ready(function() {
  // 监听所有座位复选框的状态变化
  $('.seatplan input[type="checkbox"]').on('change', function() {
    let selectedSeats = [];
    let totalAmount = 0;

    // 遍历所有被选中的复选框
    $('.seatplan input[type="checkbox"]:checked').each(function() {
      // 拆分value中的座位号和价格
      const [seatNum, price] = $(this).val().split('|');
      selectedSeats.push(seatNum);
      totalAmount += parseInt(price);
    });

    // 更新已选座位的显示
    if (selectedSeats.length > 0) {
      $('#selected-seats').text('座位：' + selectedSeats.join(', '));
    } else {
      $('#selected-seats').text('暂无选中座位');
    }

    // 更新总价显示
    $('#total-price').text('总价：¥' + totalAmount);
  });
});

备选方案：不修改原HTML结构 #

如果你不想改动原来的座位复选框结构（name是A1/A2，value是价格），可以用下面的jQuery代码：

$(document).ready(function() {
  $('.seatplan input[type="checkbox"]').on('change', function() {
    let selectedSeats = [];
    let totalAmount = 0;

    $('.seatplan input[type="checkbox"]:checked').each(function() {
      // 从name属性获取座位号，value获取价格
      const seatNum = $(this).attr('name');
      const price = $(this).val();
      selectedSeats.push(seatNum);
      totalAmount += parseInt(price);
    });

    $('#selected-seats').text(selectedSeats.length ? '座位：' + selectedSeats.join(', ') : '暂无选中座位');
    $('#total-price').text('总价：¥' + totalAmount);
  });
});

注意事项 #

• 确保你的页面已经引入了jQuery库（本地文件或者CDN都可以）
• 后端PHP接收数据时，如果用了seat[]的name，直接用$_POST['seat']就能拿到所有选中的座位值；如果是原结构的name，需要遍历判断哪些复选框被选中

内容的提问来源于stack exchange，提问作者Ye Htun Z