Adding/removing 复选框 checked/unchecked 上的值使用 jquery

Question

我正在尝试为用户制作一个选项列表，以便 select 获得报价，例如：

香蕉支票
苹果支票
未选中饼干
卡纸检查

每个选项的价值香蕉 3 美元，苹果 2 美元，饼干 11 美元，果酱 1 美元。

以上示例总计 $4 + $2 + $1.20 = $7.20（不需要饼干）

我希望更新总数，因为复选框是 ticked/unticked。这些值似乎没有增加，如果我要添加更多选项，我的代码似乎很长。

我的代码http://codepen.io/Perk/pen/azpzWK

你可能会说我是 JavaScript/jQuery 的新手。

HTML:

<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" />
<label for="checkbox1" class="css-label">banana</label><br>

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" />
<label for="checkbox2" class="css-label">apple</label><br>


<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" />
<label for="checkbox3" class="css-label">biscuit</label><br>

<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" />
<label for="checkbox4" class="css-label">jam </label><br>

<p>Total Cost: $<span id="total"></span></p>

脚本：

$total = "";


 // Banana 

$('#checkbox1').click(function(){
    if (this.checked) {
        $total =+ 4;
        $('#total').html( $total );
    } 
}) 

// Apple 

$('#checkbox2').click(function(){
    if (this.checked) {
      $total =+ 2;
      $('#total').html( $total );
    }    
}) 

// Biscuit 

$('#checkbox3').click(function(){
    if (this.checked) {
        $total =+ 11;
        $('#total').html( $total );
    } 
}) 

// Jam 

$('#checkbox4').click(function(){
    if (this.checked) {
      $total =+ 1;
      $('#total').html( $total );
    }    
})

Answer 1

他们没有添加，因为您使用的是 $total =+ n 而不是 $total += n。您将 $total 值设置为每次指定的值。 $total =+ 11 会将 $total 设置为 +11（计算结果为数字 11）。

要修复它，只需将 =+ 更改为 +=:

if (this.checked) {
    $total += 11;
    $('#total').html( $total );
}

更简洁的解决方案

更好的解决方案是将每个值添加为标记中的复选框值。例如：

<input type="checkbox" ... value="11" />

然后仅使用一个 change 事件来处理所有情况：

$('input:checkbox').on('change', function() {
    if (this.checked)
        $total += +this.value;
    else
        $total -= +this.value;

    $('#total').html($total);
});

演示

var $total = 0;

$('input:checkbox').on('change', function() {
    if (this.checked)
        $total += +this.value;
    else
        $total -= +this.value;

    $('#total').html($total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="4" />
<label for="checkbox1" class="css-label">banana</label><br>

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="2" />
<label for="checkbox2" class="css-label">apple</label><br>


<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="11" />
<label for="checkbox3" class="css-label">biscuit</label><br>

<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="1" />
<label for="checkbox4" class="css-label">jam </label><br>

<p>Total Cost: $<span id="total">0</span></p>

Answer 2

试试这个优化代码：

codepen

$total = 0;
var fruit = {
  jam: 1,
  banana: 4,
  biscuit: 11,
  apple: 2
}


$('input[type="checkbox"]').click(function() {
  if (this.checked) {
    $total += fruit[$(this).data("type")] || 0;
    $('#total').html($total);
  } else {
    $total -= fruit[$(this).data("type")] || 0;
  }


})

<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" data-type="banana" />
<label for="checkbox1" class="css-label">banana</label>
<br>

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" data-type="apple" />
<label for="checkbox2" class="css-label">apple</label>
<br>


<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" data-type="biscuit" />
<label for="checkbox3" class="css-label">biscuit</label>
<br>

<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" data-type="jam" />
<label for="checkbox4" class="css-label">jam</label>
<br>

<p>Total Cost: $<span id="total"></span>
</p>

它应该能满足您的需求

Answer 3

您可以通过向 HTML 添加一个 value 属性来整理您的逻辑：

<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="4" />
<label for="checkbox1" class="css-label">banana</label>
<br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="2" />
<label for="checkbox2" class="css-label">apple</label>
<br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="11" />
<label for="checkbox3" class="css-label">biscuit</label>
<br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="1" />
<label for="checkbox4" class="css-label">jam</label>
<br>
<p>Total Cost: $<span id="total">0</span></p>

然后在 Javascript 中，您可以为每个复选框使用相同的点击处理程序。这将对每次点击时每个复选框的值求和，以确保不会遗漏任何值。

$('.css-checkbox').click(function() {
    var values = $('.css-checkbox:checked').map(function() {
        return parseInt(this.value, 10);
    }).get();
    $('#total').html(values.reduce(function(p, c) { return p + c; }, 0));
});

Example fiddle

Answer 4

+=不是=+
将总数初始化为 0 ，而不是 "" 。 cos 然后 += 将作为连接执行。

你也要考虑取消勾选操作

var $total = 0;
$('#checkbox1').click(function(){
if (this.checked) {
    $total += 4;
    $('#total').html( $total );
} else{
    $total -= 4;
    $('#total').html( $total );
}
})

Answer 5

使用语法分析 parseInt() 函数解析一个字符串参数和 returns 一个整数已检查和未检查代码的演示

$total = 0;


 // Banana 

$('#checkbox1').click(function(){
    if (this.checked) {
        $total =parseInt($total+ 4);
        $('#total').html( $total );
    }else{
      $total =parseInt($total- 4);
        $('#total').html( $total );
    } 
  
}) 

// Apple 

$('#checkbox2').click(function(){
    if (this.checked) {
      $total =parseInt($total+ 2);
      $('#total').html( $total );
    }else{
      $total =parseInt($total- 2);
        $('#total').html( $total );
    }     


}) 
    
// Biscuit 

$('#checkbox3').click(function(){
    if (this.checked) {
        $total =parseInt($total+ 11);
        $('#total').html( $total );
    }else{
      $total =parseInt($total- 11);
        $('#total').html( $total );
    }  
  
}) 

// Jam 

$('#checkbox4').click(function(){
    if (this.checked) {
     $total =parseInt($total+ 1);
      $('#total').html( $total );
    }else{
      $total =parseInt($total- 1);
        $('#total').html( $total );
    }     


})

/*Check box*/

input[type=checkbox].css-checkbox {
       position:absolute; z-index:-1000; 
       left:-1000px; 
       overflow: hidden; 
       clip: rect(0 0 0 0); 
       height:1px; 
       width:1px; 
       margin:-1px; 
       padding:0; 
       border:0;

      }

      input[type=checkbox].css-checkbox + label.css-label {
       padding-left:27px;
       height:22px; 
       display:inline-block;
       line-height:22px;
       background-repeat:no-repeat;
       background-position: 0 0;
       font-size:22px;
       vertical-align:middle;
       cursor:pointer;
       margin-top: 15px;
      }

      input[type=checkbox].css-checkbox:checked + label.css-label {
       background-position: 0 -22px;
      }
      label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_1470d2ed405eb6fa12570883c6b38297.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" />
 <label for="checkbox1" class="css-label">banana</label><br>

 <input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" />
 <label for="checkbox2" class="css-label">apple</label><br>


 <input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" />
 <label for="checkbox3" class="css-label">biscuit</label><br>

 <input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" />
 <label for="checkbox4" class="css-label">jam </label><br>

<p>Total Cost: $<span id="total"></span></p>

Adding/removing 复选框 checked/unchecked 上的值使用 jquery

Adding/removing value on checkbox checked/unchecked using jquery

javascript

jquery

math

checkbox

更简洁的解决方案

演示