Question

如果某人选中一个以上的复选框（即香肠和意大利辣香肠比萨饼），则正确的总数为5。但是，如果用户仅撤销一个复选框（如香肠），则总数为0。我需要如果未选中所有复选框，则总数将变为零。

第一次尝试：

<script type="text/javascript">
$(document).ready(function(){
    $('#pizzaOption>input[type="checkbox"]').click(function() {
      if ($(this).is(':checked')) {
    var pizzaPrice=$(this).closest("#pizzaOption").data('price');
       $('#pizzaTotal').html("pizza: "+pizzaPrice);
    } else {
      var pizzaPrice=0;
      $('#pizzaTotal').html("pizza: " + pizzaPrice);
    }
    });
});
</script>

第二次尝试。此尝试代码根本不起作用，但我想解决方案可能看起来与此类似。

<script type="text/javascript">
$(document).ready(function(){
    $('#sodaOption>input[type="checkbox"]').click(function() {
      if ($('#sodaOption>input[type="checkbox"]').is(':checked')) {
    var sodaPrice=$(this).closest("#sodaOption").data('price');
       $('#sodaTotal').html("soda: "+ sodaPrice);
         var total +=sodaPrice;
      $('#total').html("total: "+ total);
    }   else ($(this).is(':unchecked')) { 
      var sodaPrice=0;
      $('#sodaTotal').html("soda: " + sodaPrice);
    }
    });
});
</script>

我希望只有在未选中所有复选框的情况下，总数才为零。提前致谢。

Answer 1

我会简化您的方法。由于所有选项的价格都相同，因此只需计算每组中检查了多少输入并乘以价格即可。最简单的方法是在包装了复选框而不是复选框本身的元素中添加单击处理程序。然后查询选中的复选框并进行相应的更新。

var $pizzaOptions = $( '.pizza-options' );
var pizzaPrice    = +$pizzaOptions.data( 'price' );
var $sodaOptions  = $( '.soda-options' );
var sodaPrice     = +$sodaOptions.data( 'price' );
var $pizzaTotal   = $( '.pizza-total' );
var $sodaTotal    = $( '.soda-total' );

function calculator( $totalEl, price, $options ) {
  return function ( e ) {
    $totalEl.text( price * $options.find( '[type="checkbox"]:checked' ).length );
  };
}

$sodaOptions.on( 'click', calculator( $sodaTotal, sodaPrice, $sodaOptions ) );
$pizzaOptions.on( 'click', calculator( $pizzaTotal, pizzaPrice, $pizzaOptions ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="order-form">

  <div class="pizza-options" data-price="5">
    <h2>Pizza</h2>
    <label>
      <input type="checkbox" value="sausage"> Sausage
    </label>
    <label>
      <input type="checkbox" value="pepperoni"> Pepperoni
    </label>
    <label>
      <input type="checkbox" value="mushrooms"> Mushrooms
    </label>
  </div>
  
  <div class="soda-options" data-price="2">
    <h2>Soda</h2>
    <label>
      <input type="checkbox" value="coke"> Coke
    </label>
    <label>
      <input type="checkbox" value="pepsi"> Pepsi
    </label>
  </div>

  <div class="totals">
    <p>
      <strong>Pizza Total:</strong> <span class="pizza-total"></span>
    </p>
    <p>
      <strong>Soda Total:</strong> <span class="soda-total"></span>
    </p>
  </div>

</form>

现在，我可能在这里出了点问题，因为我不知道每个选项是否应用了价格，或者无论选择了1个或多个选项，价格都一样。如果需要后者，请更改：

$totalEl.text( price * $options.find( '[type="checkbox"]:checked' ).length );

到

$totalEl.text( $options.find( '[type="checkbox"]:checked' ).length ? price : 0 );

var $pizzaOptions = $( '.pizza-options' );
var pizzaPrice    = +$pizzaOptions.data( 'price' );
var $sodaOptions  = $( '.soda-options' );
var sodaPrice     = +$sodaOptions.data( 'price' );
var $pizzaTotal   = $( '.pizza-total' );
var $sodaTotal    = $( '.soda-total' );

function calculator( $totalEl, price, $options ) {
  return function ( e ) {
    $totalEl.text( $options.find( '[type="checkbox"]:checked' ).length ? price : 0 );
  };
}

$sodaOptions.on( 'click', calculator( $sodaTotal, sodaPrice, $sodaOptions ) );
$pizzaOptions.on( 'click', calculator( $pizzaTotal, pizzaPrice, $pizzaOptions ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="order-form">

  <div class="pizza-options" data-price="5">
    <h2>Pizza</h2>
    <label>
      <input type="checkbox" value="sausage"> Sausage
    </label>
    <label>
      <input type="checkbox" value="pepperoni"> Pepperoni
    </label>
    <label>
      <input type="checkbox" value="mushrooms"> Mushrooms
    </label>
  </div>
  
  <div class="soda-options" data-price="2">
    <h2>Soda</h2>
    <label>
      <input type="checkbox" value="coke"> Coke
    </label>
    <label>
      <input type="checkbox" value="pepsi"> Pepsi
    </label>
  </div>

  <div class="totals">
    <p>
      <strong>Pizza Total:</strong> <span class="pizza-total"></span>
    </p>
    <p>
      <strong>Soda Total:</strong> <span class="soda-total"></span>
    </p>
  </div>

</form>

注意：您也不需要为每个选项使用多个表单，不需要多个<script>标签等。可以的话，请重新使用代码。创建一个作为重复代码模板的函数，您可以插入很少的不同部分。

如果未选中此复选框，请使用jQuery撤消data-price属性

1 个答案: