Question

如果有人打勾，我想获取data-price属性。什么都没有出现在console.log中。我尝试使用.prop（'checked'）、. data（'checked'）和.attr（'checked'）。我假设语法有问题吗？

本文Get data-price jquery中的以下代码似乎无效：

Dim sht1 As Worksheet, sht2 As Worksheet

Set sht1 = Worksheets("Sheet1")
Set sht2 = Worksheets("Table")

With sh2
    .Cells(.Rows.Count, 1).End(xlUp).Offset(1).Value = sh1.Range("K10").Value
    .Cells(.Rows.Count, 2).End(xlUp).Offset(1).Value = sh1.Range("G15").Value
End With

使用本文没有成功。 https://medium.com/js-dojo/check-if-a-checkbox-is-checked-with-jquery-2843f97d4954代码如下：

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

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')，但是没有绑定任何事件，并且由于未选中复选框onload事件，并且由于$(this).data('price');未定义，因为父元素上的data-price，将始终导致false单击的复选框。

根据您的问题，您在'#pizzaOption'上有click事件，您需要在checkbox上绑定click事件，这是一个示例：

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

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

2 个答案: