Question

我正在尝试列出一个供用户选择以获取报价的选项列表，例如：

香蕉检查
apple check
饼干未经检查
果酱检查

每个选项的值为banana $ 3，apple $ 2，饼干$ 11，jam $ 1.

以上4美元以上的例子+ 2美元+ 1.20美元= 7.20美元（不需要饼干）

我想要在勾选/取消勾选复选框时更新总数。如果我要添加更多选项，这些值似乎不会添加，而且我的代码似乎很长。

你可能会说我是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 $4

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

// Apple $2

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

// Biscuit $11

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

// Jam $1

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

+ = not = +
将总数初始化为0，而不是＆＃34;＆＃34; 。 cos then + =将作为连接执行。

您还必须考虑取消选中操作。

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

Answer 5

使用parseint parseInt（）函数解析字符串参数并返回一个整数带有选中和未选中代码的演示

$total = 0;


 // Banana $4

$('#checkbox1').click(function(){
    if (this.checked) {
        $total =parseInt($total+ 4);
        $('#total').html( $total );
    }else{
      $total =parseInt($total- 4);
        $('#total').html( $total );
    } 
  
}) 

// Apple $2

$('#checkbox2').click(function(){
    if (this.checked) {
      $total =parseInt($total+ 2);
      $('#total').html( $total );
    }else{
      $total =parseInt($total- 2);
        $('#total').html( $total );
    }     


}) 
    
// Biscuit $11

$('#checkbox3').click(function(){
    if (this.checked) {
        $total =parseInt($total+ 11);
        $('#total').html( $total );
    }else{
      $total =parseInt($total- 11);
        $('#total').html( $total );
    }  
  
}) 

// Jam $1

$('#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>

在使用jquery选中/取消选中的复选框上添加/删除值

5 个答案:

更整洁的解决方案

演示