jquery - 为什么与我的复选框相关的操作在第一次单击时不起作用？

Question

我正在尝试为培训课程创建一个订单表格，其中包括现有或以前客户的折扣。这应该很简单 - 如果您是以前的学生，只需勾选复选框，表格就会应用折扣。

我写的代码几乎可以工作，但有一个明显的问题。第一次选中该框时，什么也没有发生。然后，如果您取消选中该框，则会应用折扣。再次选中该框，它会删除折扣。这意味着如果您选中该框一次，则不会发生任何事情，但如果您再次单击它，尽管表明您不是现有/以前的客户，您仍会收到折扣。

html如下：

<input type="checkbox" name="discounttick" value="Current or former student" id="discountbox" />

和jQuery：

var discount = 1;

function discountfunction(){
 if($("#discountbox").attr('checked')){
 discount = 0.9;
 }
 else {
 discount = 1;
 } 
 }

$("#discountbox").click(discountfunction);

任何帮助将非常感激。

谢谢！

Answer 1

attr方法不是获取/设置您可以使用的元素属性的好选择prop：

if($("#discountbox").prop('checked')){

您还可以使用三元运算符和change事件：

$('#discountbox').change(function(){
     discount = this.checked ? 0.9 : 1
})

Answer 2

在老兄周围交换你的变量

var discount = 1;

function discountfunction(){
 if($("#discountbox").attr('checked')){
 discount = 1;
 }
 else {
 discount = 0.9;
 } 
 }

$("#discountbox").click(discountfunction);

Answer 3

尝试使用is而不是 attr。

 var discount = 1;

    function discountfunction(){
     if($("#discountbox").is(':checked')){
     discount = 0.9;
     }
     else {
     discount = 1;
     } 
     }

    $("#discountbox").click(discountfunction);