How to get value Check and Uncheck checkbox use JQuery on array

Question

Now im doing PHP Project combine with JQuery. I want to get value from checkbox both checked and unchecked on array. here is what i try

$(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); 
        }
        
    });
 });

i make a sample on this site. https://repl.it/@ferdinandgush/get-value-checkbox please click "RUN" bottom on the top to able test it.

the problem is, when the checkbox checked more then 1 and when i want to uncheck 1 of it. it still return value "True" not "false".

what i want it. each of checkbox can return value wherever i checked and uncheck it.

checked return consolo.log('true');

unchecked return consolo.log('false');

please help

Answer 1

I believe you can just do it like this if ($(this).prop('checked')) {

Then it will only check if the checkbox that you click on is checked or not.

Demo

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