如何在数组上使用 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() {&nbsp; $('.dealprice').on('input', function() {&nbsp; &nbsp; if ($(this).prop('checked')) {&nbsp; &nbsp; &nbsp; //CHECKED&nbsp; &nbsp; &nbsp; console.log("Checked");&nbsp; &nbsp; &nbsp; const getPrice = $(this).closest("tr").find('input[name=itemprice]').val();&nbsp; &nbsp; &nbsp; console.log(getPrice);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; //UNCHECKED&nbsp; &nbsp; &nbsp; console.log("Uncheck");&nbsp; &nbsp; &nbsp; const getPrice = $(this).closest("tr").find('input[name=itemprice]').val();&nbsp; &nbsp; &nbsp; console.log(getPrice);&nbsp; &nbsp; }&nbsp; });});.tg&nbsp; {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;&nbsp; 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;&nbsp; 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">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th class="tg-qh0q">Item</th>&nbsp; &nbsp; &nbsp; <th class="tg-qh0q">Price</th>&nbsp; &nbsp; &nbsp; <th class="tg-qh0q">Deal</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="tg-0lax">Book</td>&nbsp; &nbsp; &nbsp; <td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>&nbsp; &nbsp; &nbsp; <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][0]"></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="tg-0lax">Pencil</td>&nbsp; &nbsp; &nbsp; <td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>&nbsp; &nbsp; &nbsp; <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][1]"></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="tg-0lax">Pen</td>&nbsp; &nbsp; &nbsp; <td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>&nbsp; &nbsp; &nbsp; <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][2]"></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="tg-0lax">spidol</td>&nbsp; &nbsp; &nbsp; <td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>&nbsp; &nbsp; &nbsp; <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][3]"></td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

Answer 2

<script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; $(".dealprice").change(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if($(this).is(":checked")){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });</script>