如何在数组上使用 JQuery 获取值检查和取消检查复选框

Question

现在我正在做 PHP 项目与 JQuery 结合。我想从数组上选中和未选中的复选框获取值。这是我尝试的$(function() {      $('.dealprice').on('input', function(){        if($('.dealprice:checkbox:checked').prop('checked')){            //CHECKED            console.log("Checked");            const getPrice = $(this).closest("tr").find('input[name=itemprice]').val();            console.log(getPrice);        }else{            //UNCHECKED            console.log("Uncheck");            const getPrice = $(this).closest("tr").find('input[name=itemprice]').val();            console.log(getPrice);         }            }); });我在这个网站上制作了一个样本。https://repl.it/@ferdinandgush/get-value-checkbox请单击顶部的“运行”底部以进行测试。问题是，当复选框选中的数量超过 1 个时，以及当我想取消选中其中的 1 个时。它仍然返回值“True”而不是“false”。我想要什么。每个复选框都可以在我选中和取消选中的地方返回值。检查退货consolo.log('true');未经检查的退货consolo.log('false');

Answer 1

我相信你可以这样做if ($(this).prop('checked')) {

然后它只会检查您单击的复选框是否被选中。

演示

$(function() {

  $('.dealprice').on('input', function() {

    if ($(this).prop('checked')) {

      //CHECKED

      console.log("Checked");

      const getPrice = $(this).closest("tr").find('input[name=itemprice]').val();

      console.log(getPrice);

    } else {

      //UNCHECKED

      console.log("Uncheck");

      const getPrice = $(this).closest("tr").find('input[name=itemprice]').val();

      console.log(getPrice);

    }

  });

});

.tg  {border-collapse:collapse;border-spacing:0;}

.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;

  overflow:hidden;padding:10px 5px;word-break:normal;}

.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;

  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}

.tg .tg-qh0q{background-color:#c0c0c0;color:#000000;font-weight:bold;text-align:center;vertical-align:top}

.tg .tg-0lax{text-align:left;vertical-align:top}

.tg .tg-amwm{font-weight:bold;text-align:center;vertical-align:top}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="tg">

  <thead>

    <tr>

      <th class="tg-qh0q">Item</th>

      <th class="tg-qh0q">Price</th>

      <th class="tg-qh0q">Deal</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="tg-0lax">Book</td>

      <td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>

      <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][0]"></td>

    </tr>

    <tr>

      <td class="tg-0lax">Pencil</td>

      <td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>

      <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][1]"></td>

    </tr>

    <tr>

      <td class="tg-0lax">Pen</td>

      <td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>

      <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][2]"></td>

    </tr>

    <tr>

      <td class="tg-0lax">spidol</td>

      <td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>

      <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][3]"></td>

    </tr>

  </tbody>

</table>

Answer 2

<script>

    $(document).ready(function(){

        $(".dealprice").change(function(){

            if($(this).is(":checked")){

                console.log(true);

            } else {

                console.log(false);

            }

        });

    });

</script>