使用 JS 从表单输入复选框获取数据属性

Question

如果有人勾选，我想获取数据价格属性。 console.log 中没有任何内容。我尝试使用 .prop('checked')、.data('checked') 和 .attr('checked')。我假设语法有问题？

这篇文章Get data-price 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

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

Answer 2

你的代码有很多错误。

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

你在 $(document).ready() 的回调函数中有 { { 并且它没有用 }); 关闭并且你有 if 在你的点击事件中导致语法错误。

在你的第二个代码中

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

使用 JS 从表单输入复选框获取数据属性

get data-attr from a form input checkbox using JS

javascript

custom-data-attribute