使用JS从表单输入复选框中获取Data-ATTR

Question

如果有人放置了Chectmark，我想获得数据价格属性。Console.log中什么都没出现。我尝试使用.prop（'checked'），.data（'checked'）和.attr（'checked'）。我假设语法有问题吗？

以下文章数据价格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-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()的回调函数中具有{ {，并且它没有使用});关闭，并且在单击事件中，您可以进行语法错误。

在您的第二个代码中

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