получить data-attr из поля ввода формы используя JS

Question

Если кто-то поставит галочку, я хочу получить атрибут data-price.Ничего не появляется в console.log.Я пытался использовать .prop («проверено»), .data («проверено») и .attr («проверено»).Я предполагаю, что что-то не так с синтаксисом?

Эта статья Получить код данных jquery , как показано ниже, не работает:

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

Использовал эту статью безуспешно.https://medium.com/js-dojo/check-if-a-checkbox-is-checked-with-jquery-2843f97d4954 Код указан ниже:

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

Answer 1

В вашем коде много ошибок.

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

У вас есть { { в функции обратного вызова $(document).ready(), и она не закрывается с }); И у вас есть, если в вашем событии click возникает синтаксическая ошибка.

ВВаш второй код

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

Вы проверили attr('checked'), но для него нет события, связанного с ним, и оно всегда будет иметь значение false, потому что не установлен флажок для события onload, а $(this).data('price'); не определено, поскольку data-price вродительский элемент отмеченного флажка.

И у вас есть событие щелчка на '#pizzaOption' в соответствии с вашим вопросом, вам нужно привязать событие щелчка на checkbox, вот пример:

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

Другой пример:

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

Answer 2

<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'))
    })
 })