1

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

1
  • Are you still having problems? Commented Aug 31, 2020 at 5:33

2 Answers 2

0

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>

Sign up to request clarification or add additional context in comments.

1 Comment

@ferdinand No problem.
0
<script>
    $(document).ready(function(){
        $(".dealprice").change(function(){
            if($(this).is(":checked")){
                console.log(true);
            } else {
                console.log(false);
            }
        });
    });
</script>

2 Comments

While this may answer the problem, it's always a good idea to leave a comment about why this solves the OP's problem
Basically we are adding a change event on all of the checkbox. So, whenever the checkbox's checked/unchecked, the function attached to the change event gets triggered.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.