在复选框旁边添加文本

Question

当单击该复选框时，将弹出另一个模态以显示所选值的数量，我检查Geda Jumuad并添加“ 2”作为数量值，但随后将值“ 2”放在复选框的开头。 。 我想将数量值放在选中的复选框旁边..请帮助我。 这是我的代码

<b>Menu: </b>
<br>
<div class="menucontainers" style="background: #fff; border-style: solid; border-width: 2px; border-color:#ccccff; width: 400px; height:150px; overflow:auto;">
  <!-- <img src ="../1.jpg" class="img-rounded"> -->

  <ul>
      <?php
                          include ('myConnection.php');

                          $query = "Select * from menu_category order by menu_cat_name";
                          $result = mysql_query($query);
                          while ($row = mysql_fetch_array($result)) {
                              $menucatname = $row['menu_cat_name'];
                              $menucatid = $row['menu_cat_id_inc'];

                        ?>
          <li class="dropdownz" style="border-style: solid;border-color: white; border-bottom: 2px; border-left: 2px; border-right: 2px">
              <a href="#" data-toggle="dropdownz" style="font-size:15px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i id = "arrow" class="icon-arrow"></i><?php echo "$menucatname"; ?></a>
              <ul id="ddownz-menu" class="dropdownz-menu">
                  <li>
                      <?php
                              $query2 = "Select * from menu where menu_cat_id_inc = '$menucatid' order by menu_name";
                              $result2 = mysql_query($query2);
                              $countme = 0;
                              while ($row2 = mysql_fetch_array($result2)) {
                                  $menuname = $row2['menu_name'];
                                  $price = $row2['price'];                          
                              if ($countme % 2 == 0)
                              {
                            ?>
                          <div class="col col-md-6">
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <input type="checkbox" id="newmenu" name="cbox[]" style="font-size:15px" value="<?php echo $row2['menu_id_inc'];?>">
                              <?php

                                      echo '<span id = "quantity" style = "color:black;"></span>'. " " . "$menuname";
                                  ?>

                          </div>
                          <?php
                              }
                              else
                              {

                              ?>
                              <div class="col col-md-4">
                                  <input type="checkbox" id="newmenu" name="cbox[]" value="<?php echo $row2['menu_id_inc'];?>">

                                  <?php
                                      echo '<span id = "quantity" style = "color:black;"></span>'. " " . "$menuname";
                                  ?>
                              </div>

                              <?php
                              }
                              }
                                  ?>
                  </li>
              </ul>
          </li>
          <?php
                          }

                        ?>
  </ul>
</div>

和javascript。 。

$("#qtyok").click(function () {
    var id = $("#menuid").val();
    var qty = $("#qtybox").val();
    if (qty != '') {
        $("#loaderz").show();
        $.post("fm_valuemenuload.php", {
                id: id,
                qty: qty

            },
            function (data, status) {
                $("#loaderz").hide();
                $("#modalQty").modal('hide');
                $("#message").html('Added');
                document.getElementById('quantity').innerHTML = qty;
                price += data * qty;
                $("#newprice").val(price.toFixed(2));
                $("#modalSUCCESS").modal('show');
                setTimeout(func1, 3000);

            });
    }
});

`

Answer 1

我可能误解了您的问题，但是...我想您只是以错误的顺序得到了它。 将跨度放在$ menuname之后。

代替

echo '<span id = "quantity" style = "color:black;"></span>'. " " . "$menuname";

做

echo "$menuname".' <span id = "quantity" style = "color:black;"></span>';

您还必须为范围分配唯一的ID。 尽管您的复选框是动态的，但是例如，您可以检索这些复选框的值并将其附加到“数量”中。 您将产生ID“ quantity1”，“ quantity2”，“ quantity3”。 将上一行代码更改为

echo "$menuname".' <span id = "quantity'.$row2['menu_id_inc'].'" style = "color:black;"></span>';

您还必须在JavaScript中执行类似的操作。 检索javascript变量中的复选框值编号，并将其附加到此处的“数量”中

document.getElementById('quantity' + value).innerHTML = qty;