使用复选框向购物车添加折扣
Add discount to shopping-cart using checkboxes
我真的需要一个可以帮助我的人:-)
我想通过在我的商店中单击各种复选框来为客户提供折扣。
访问者最多可以选择 4 个复选框。不是 5、6 等。可以这样做吗?
我现在的问题是客户实际上可以免费获得商品 - 或者更糟 - 我必须付费才能向他们出售商品!
这是测试代码:
<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="20" />
<label for="checkbox1" class="css-label">banana</label><br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="20" />
<label for="checkbox2" class="css-label">apple</label><br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="20" />
<label for="checkbox3" class="css-label">biscuit</label><br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="20" />
<label for="checkbox4" class="css-label">jam </label><br>
<input type="checkbox" name="checkbox5" id="checkbox5" class="css-checkbox" value="20" />
<label for="checkbox5" class="css-label">orange </label><br>
<input type="checkbox" name="checkbox6" id="checkbox6" class="css-checkbox" value="20" />
<label for="checkbox6" class="css-label">pinepple </label><br>
<br /><br />
<span id="total"><b>Normal price: </b> 100</span></p>
<script>
var $total = 100;
var $total2 = 100;
$('input:checkbox').on('change', function() {
if (this.checked)
$total += -this.value;
else
$total -= -this.value;
if ($total2 > $total)
$('#total').html('<b>Discount price: </b>'+$total);
else
$('#total').html('<b>Normal price: </b>'+$total);
});
</script>
所以逻辑是 -
If the 4 checkboxes are clicked then disable rest
var $total = 100;
var $total2 = 100;
$('input:checkbox').on('change', function() {
if($('input:checked').length == 4) {
$('input:checkbox:not(:checked)').attr("disabled", true);
}
else {
$('input:checkbox:not(:checked)').attr("disabled", false);
}
if (this.checked)
$total += -this.value;
else
$total -= -this.value;
if ($total2 > $total)
$('#total').html('<b>Discount price: </b>'+$total);
else
$('#total').html('<b>Normal price: </b>'+$total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="20" />
<label for="checkbox1" class="css-label">banana</label><br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="20" />
<label for="checkbox2" class="css-label">apple</label><br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="20" />
<label for="checkbox3" class="css-label">biscuit</label><br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="20" />
<label for="checkbox4" class="css-label">jam </label><br>
<input type="checkbox" name="checkbox5" id="checkbox5" class="css-checkbox" value="20" />
<label for="checkbox5" class="css-label">orange </label><br>
<input type="checkbox" name="checkbox6" id="checkbox6" class="css-checkbox" value="20" />
<label for="checkbox6" class="css-label">pinepple </label><br>
<span id="total"><b>Normal price: </b> 100</span>
我真的需要一个可以帮助我的人:-)
我想通过在我的商店中单击各种复选框来为客户提供折扣。
访问者最多可以选择 4 个复选框。不是 5、6 等。可以这样做吗?
我现在的问题是客户实际上可以免费获得商品 - 或者更糟 - 我必须付费才能向他们出售商品!
这是测试代码:
<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="20" />
<label for="checkbox1" class="css-label">banana</label><br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="20" />
<label for="checkbox2" class="css-label">apple</label><br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="20" />
<label for="checkbox3" class="css-label">biscuit</label><br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="20" />
<label for="checkbox4" class="css-label">jam </label><br>
<input type="checkbox" name="checkbox5" id="checkbox5" class="css-checkbox" value="20" />
<label for="checkbox5" class="css-label">orange </label><br>
<input type="checkbox" name="checkbox6" id="checkbox6" class="css-checkbox" value="20" />
<label for="checkbox6" class="css-label">pinepple </label><br>
<br /><br />
<span id="total"><b>Normal price: </b> 100</span></p>
<script>
var $total = 100;
var $total2 = 100;
$('input:checkbox').on('change', function() {
if (this.checked)
$total += -this.value;
else
$total -= -this.value;
if ($total2 > $total)
$('#total').html('<b>Discount price: </b>'+$total);
else
$('#total').html('<b>Normal price: </b>'+$total);
});
</script>
所以逻辑是 -
If the 4 checkboxes are clicked then disable rest
var $total = 100;
var $total2 = 100;
$('input:checkbox').on('change', function() {
if($('input:checked').length == 4) {
$('input:checkbox:not(:checked)').attr("disabled", true);
}
else {
$('input:checkbox:not(:checked)').attr("disabled", false);
}
if (this.checked)
$total += -this.value;
else
$total -= -this.value;
if ($total2 > $total)
$('#total').html('<b>Discount price: </b>'+$total);
else
$('#total').html('<b>Normal price: </b>'+$total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="20" />
<label for="checkbox1" class="css-label">banana</label><br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="20" />
<label for="checkbox2" class="css-label">apple</label><br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="20" />
<label for="checkbox3" class="css-label">biscuit</label><br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="20" />
<label for="checkbox4" class="css-label">jam </label><br>
<input type="checkbox" name="checkbox5" id="checkbox5" class="css-checkbox" value="20" />
<label for="checkbox5" class="css-label">orange </label><br>
<input type="checkbox" name="checkbox6" id="checkbox6" class="css-checkbox" value="20" />
<label for="checkbox6" class="css-label">pinepple </label><br>
<span id="total"><b>Normal price: </b> 100</span>