Question

如果选中了一个复选框，我有一个4输入复选框标记和1个div标记以显示价格

<input type="checkbox" value="None" id="check1" />
<input type="checkbox" value="None" id="check2" />
<input type="checkbox" value="None" id="check3" />
<input type="checkbox" value="None" id="check4" />
<div id="price"></div>

如果只选中1个随机复选框，我想要做的是它将在div＃price上显示数字1,800，但是如果选中2复选框，它将总计为3,600，依此类推，直到4复选框。但我真的很困惑如何使用jQuery做到这一点。有什么想法吗？

Answer 1

使用:checkbox选择器为所有thre change元素分配type = checkbox个事件，可以添加[value="None"]，同时选择checkbox元素更具体。< / LI>
使用:checkbox:checked选择器选中已选中的复选框。

＆＃13;

var val = 1800;
$(':checkbox[value="None"]').on('change', function() {
  var len = $(':checkbox:checked').length;
  $('#price').text(len * val);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" value="None" id="check1" />
<input type="checkbox" value="None" id="check2" />
<input type="checkbox" value="None" id="check3" />
<input type="checkbox" value="None" id="check4" />
<div id="price"></div>

＆＃13;

Answer 2

<强> HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <input type="checkbox" value="100" id="check1" />
    <input type="checkbox" value="21" id="check2" />
    <input type="checkbox" value="22" id="check3" />
    <input type="checkbox" value="4" id="check4" />
    <div id="price"></div>

<强> JAVASCRIPT

var price=0;
$(':checkbox').on('change', function() {
  var len = parseInt(this.value);  
  if($(this).is(':checked')){
    price+=len;
  }else{
    price-=len;
  }
  console.log(price)
  $('#price').text(price);
});

<强> JSBIN

JSBIN-URL

检查并总结是否选中了两个或更多复选框

2 个答案: