Question

我有复选框类型输入并使用jquery我正在尝试添加data-price属性中的数字

$(document).ready(function() {

  $(".dateboxes").click(function() {
    var total = 0;
    var price = parseInt($(this).attr('data-price'));
    //alert(price);
    if ($(this).attr('checked', true)) {
      total = total + price;
      $(this).prop('checked', this.value == 1);
    }

    if ($(this).attr('checked', false)) {
      total = total + price;
      $(this).prop('checked', this.value == 0);
    }
    alert(total);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_8"><span>08th</span> <br/><span>Wed</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_8" class="dateboxes date-inputs" value="2017-11-08" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_9"><span>09th</span> <br/><span>Thu</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_9" class="dateboxes date-inputs" value="2017-11-09" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_10"><span>10th</span> <br/><span>Fri</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_10" class="dateboxes date-inputs" value="2017-11-10" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_11"><span>11th</span> <br/><span>Sat</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_11" class="dateboxes date-inputs" value="2017-11-11" />
  </div>

</div>

但它既没有显示正确的值，也没有在点击时标记为已检查。

请帮忙

Answer 1

在if语句中使用$(this).attr('checked', false)，每次都将属性设置为false，而不是检查它。使用返回true或false的$(this).is(':checked')来查看是否选中了复选框。

此外，如果您想在每次点击时增加总价值，您应该将其声明在。click函数的范围之外。这是一个工作 JSFiddle。我希望这就是你所寻求的。

编辑：如果您想根据用户选择的复选框增加或减少总价格，请使用以下内容：

if ($(this).is(":checked")) {
   total = total + price;
}
if (!$(this).is(":checked")) {
   total = total - price;
}

Answer 2

好的，我修好了没有检查的方框问题。然而，目前尚不清楚你在试图用这个价格做什么？

$(document).ready(function() {

  $(".dateboxes").click(function() {
    var total = 0;
    var price = parseInt($(this).attr('data-price'));
    //alert(price);
    if ($(this).attr('checked')) {
      total = total + price;
   //   $(this).prop('checked', this.value == 1);
    }
    else {
      total = total + price;
    //  $(this).prop('checked', this.value == 0);
    }
    alert(total);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_8"><span>08th</span> <br/><span>Wed</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_8" class="dateboxes date-inputs" value="2017-11-08" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_9"><span>09th</span> <br/><span>Thu</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_9" class="dateboxes date-inputs" value="2017-11-09" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_10"><span>10th</span> <br/><span>Fri</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_10" class="dateboxes date-inputs" value="2017-11-10" />
  </div>

</div>
<div class="col-md-2">

  <div class="datebox">
    <label for="datebox_11"><span>11th</span> <br/><span>Sat</span></label>
    <br/><input data-price="350" type="checkbox" name="dates[]" id="datebox_11" class="dateboxes date-inputs" value="2017-11-11" />
  </div>

</div>

如何在jquery中添加复选框的数据值

2 个答案: