0

If someone puts a checkmark, I want to get the data-price attribute. Nothing is appearing in the console.log. I tried using .prop('checked'), .data('checked'), and .attr('checked'). I am assuming something is wrong with the Syntax?

This articleGet data-price jquery code as below does not seem to work:

 $(document).ready(function(){ 
      if $('#pizzaOption').click(function() {
    var price=$(this).data('price');
     console.log(price);
    });

 <form action="" id="pizzaOption" data-price="5">Large Pizza <br>
      <input type="checkbox"  value="sausage">Sausage<br>
      <input type="checkbox"  value="pepperoni">Pepperoni<br>
      <input type="checkbox"  value="mushrooms">Mushrooms<br>
      <input type="submit" value="Submit">
    </form>

Used this article to no success. https://medium.com/js-dojo/check-if-a-checkbox-is-checked-with-jquery-2843f97d4954 Code is below:

  <script type= text/javascript>
    $(document).ready(function() {
      if ($('input[type=checkbox]').attr('checked') {
    var price=$(this).data('price');
     console.log(price);
    }
                     }    
    </script>
Improve this question
2
  • probably syntax error in document.ready it should be $(document).ready(function(){ // ... }) Commented Dec 19, 2018 at 3:29
  • yes i am getting a [ ] in console now... looks like a blank array. interesting. Commented Dec 19, 2018 at 3:33

2 Answers 2

Reset to default
2

You have lots of mistake in your code. 

$(document).ready(function(){ {
      if $('#pizzaOption').click(function() {
    var price=$(this).data('price');
     console.log(price);
    });

You have { { in callback function of $(document).ready() and it is not closed with }); And you have if in your click event which results syntax error.

In your second code 

<script type= text/javascript>
    $(document).ready(function() {
      if ($('input[type=checkbox]').attr('checked') {
    var price=$(this).data('price');
     console.log(price);
    }
                     }    
    </script>

You have checked the attr('checked') but there is no event binded on it and will always result false because no checkbox is checked onload event and $(this).data('price'); is undefined because data-price on the parent element of the clicked checkbox.

And you have click event on '#pizzaOption' according to your question you need to bind the click event on checkbox here is an example:

$(document).ready(function(){
    $('#pizzaOption>input[type="checkbox"]').click(function() {
    var price=$(this).closest("#pizzaOption").data('price');
     console.log(price);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <form action="" id="pizzaOption" data-price="5">Large Pizza <br>
      <input type="checkbox"  value="sausage">Sausage<br>
      <input type="checkbox"  value="pepperoni">Pepperoni<br>
      <input type="checkbox"  value="mushrooms">Mushrooms<br>
      <input type="submit" value="Submit">
    </form>

Another example:

$(document).ready(function(){
    $('#pizzaOption>input[type="checkbox"]').click(function() {
      if ($(this).is(':checked')) {
    var price=$(this).closest("#pizzaOption").data('price');
     console.log(price);
    }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
      <input type="checkbox"  value="sausage">Sausage<br>
      <input type="checkbox"  value="pepperoni">Pepperoni<br>
      <input type="checkbox"  value="mushrooms">Mushrooms<br>
      <input type="submit" value="Submit">
    </form>

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

4 Comments

ok thanks your code worked marked as solution. on second thought, i will need to update it so it only triggers the price if checked but i will do some research on that
@chessmaster1 I have updated my answer check second snippet
Cool, your additional solution totally worked. codepen.io/ScottFSchmidt/pen/QzGWGP?editors=0001 If you have time, I made a codepen. When i added $('#total').html(price); after console.log(price)... the 5 does not go away after "an unclick". This is very unexpected, not sure how to 'google' this one...
nevermind, figured it out using this article: stackoverflow.com/questions/9939247/… added else { var price=0; $('#total').html(price); }
0 
<form action="" id="pizzaOptions" data-price="5">Large Pizza <br>
   <input type="checkbox"  value="sausage">Sausage<br>
   <input type="checkbox"  value="pepperoni">Pepperoni<br>
   <input type="checkbox"  value="mushrooms">Mushrooms<br>
   <input type="submit" value="Submit">
</form>

<script>
// wait until document is ready
$(document).ready(function(){
    // For every checkbox checked inside form
    $('#pizzaOptions input[type="checkbox"]').click(function(){
       // display value
       console.log($(this).val())

       // now if you want to get the price you should 
       console.log($('#pizzaOptions').attr('data-price'))
    })
 })

Improve this answer

Comments

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.