Javascript 如果未选中复选框，则不要触发onclick默认函数

如果有人单击“立即购买”按钮，但没有勾选复选框，则该按钮不应触发默认功能（在本例中，没有带有“hello”的警报），但应使用红色边框标记复选框。但是当选中该框时，它应该触发默认函数（在本例中，使用“hello”发出警报）

我很难在不禁用按钮的情况下禁用默认功能。也是出于某种原因，它没有创建红色边框。我如何解决这个问题

$（“#upsellyes”）。单击（函数（）{
警惕（“你好”）；
});
$（文档）.ready（函数（）{
如果（！$（“#条款”）是（“：选中”））{
$（“#upsellyes”）。单击（函数（）{
$（“#所需条款”）.css（'border'，'1px实心红色；'）；
});
}
})

我有两个孩子*


或

您的逻辑需要被撤销，以便您不仅在页面加载时检查单击处理程序中复选框的状态。请尝试以下操作：

$（文档）.ready（函数（）{
$（“#upsellyes”）。单击（函数（e）{
如果（！$（“#条款”）是（“：选中”））{
e、 预防默认值（）；
$（“#所需条款”）.addClass（'无效'）；
}否则{
$（“#所需条款”）.removeClass（'invalid'）；
log（'已选中框…'）；
}
});
})

#所需术语{
字体大小：11px；
利润率：10px 0 20px 0；
显示：内联块；
}
#条件{
位置：绝对位置；
}
标签{
显示：内联块；
字体大小：正常；
左边距：25px；
}
.无效{
边框：1px纯红；
}

我有两个孩子。
*


或

您的逻辑需要被撤销，以便您不仅在页面加载时检查单击处理程序中复选框的状态。请尝试以下操作：

$（文档）.ready（函数（）{
$（“#upsellyes”）。单击（函数（e）{
如果（！$（“#条款”）是（“：选中”））{
e、 预防默认值（）；
$（“#所需条款”）.addClass（'无效'）；
}否则{
$（“#所需条款”）.removeClass（'invalid'）；
log（'已选中框…'）；
}
});
})

#所需术语{
字体大小：11px；
利润率：10px 0 20px 0；
显示：内联块；
}
#条件{
位置：绝对位置；
}
标签{
显示：内联块；
字体大小：正常；
左边距：25px；
}
.无效{
边框：1px纯红；
}

我有两个孩子。
*


或

这应该能帮到你：

$("#upsellyes").click(function() {
  if ($("#terms").is(":checked")) {
    alert('hello');
  } else {
    $("#terms-required").css('border', '1px solid red');
  }
});

$("#terms").click(function() {
  $("#terms-required").css('border', $(this).is(":checked") ? 'none' : '1px solid red');
});

它将检查复选框是否已选中，并根据复选框应用/删除边框

演示

$（“#upsellyes”）。单击（函数（）{
如果（$（“#条款”）。是（“：选中”））{
警惕（“你好”）；
}否则{
$（“#所需条款”）.css（'边框'，'1px实心红色'）；
}
});
$（“#术语”）。单击（函数（）{
$（“#术语必填”）.css（'边框'，$（此）.is（“：选中”）？“无”：“1px实心红色”）；
})；

我有两个孩子*


或

这应该能帮到你：

$("#upsellyes").click(function() {
  if ($("#terms").is(":checked")) {
    alert('hello');
  } else {
    $("#terms-required").css('border', '1px solid red');
  }
});

$("#terms").click(function() {
  $("#terms-required").css('border', $(this).is(":checked") ? 'none' : '1px solid red');
});

它将检查复选框是否已选中，并根据复选框应用/删除边框

演示

$（“#upsellyes”）。单击（函数（）{
如果（$（“#条款”）。是（“：选中”））{
警惕（“你好”）；
}否则{
$（“#所需条款”）.css（'边框'，'1px实心红色'）；
}
});
$（“#术语”）。单击（函数（）{
$（“#术语必填”）.css（'边框'，$（此）.is（“：选中”）？“无”：“1px实心红色”）；
})；

我有两个孩子*


或

你可以试试这个。希望能奏效：）

---

你可以试试这个。希望这个工作：）

---

在单击功能之前不要使用if块。 由于您有两个相同的点击功能，两个功能都会启动。因此，无论框是否勾选，您都会收到hello警报

一般只需更改单击功能

$(document).ready(function() {
    $("#upsellyes").click(function() {
      if (!$("#terms").is(":checked")) {
        alert("hello");
      else{
        $("#terms-required").css("border", "1px solid red");
      }
    });
  }
})

---

在单击功能之前不要使用if块。 由于您有两个相同的点击功能，两个功能都会启动。因此，无论框是否勾选，您都会收到hello警报

一般只需更改单击功能

$(document).ready(function() {
    $("#upsellyes").click(function() {
      if (!$("#terms").is(":checked")) {
        alert("hello");
      else{
        $("#terms-required").css("border", "1px solid red");
      }
    });
  }
})

检查选中状态后，还可以在单击处理程序中使用

return false；

$（文档）.ready（函数（）{
$（“#upsellyes”）。单击（函数（e）{
如果（！$（“#条款”）是（“：选中”））{
$（“#所需条款”）.addClass（'无效'）；
返回false；
}否则{
$（“#所需条款”）.removeClass（'invalid'）；
}
});
})

检查选中状态后，还可以在单击处理程序中使用

return false；

$（文档）.ready（函数（）{
$（“#upsellyes”）。单击（函数（e）{
如果（！$（“#条款”）是（“：选中”））{
$（“#所需条款”）.addClass（'无效'）；
返回false；
}否则{
$（“#所需条款”）.removeClass（'invalid'）；
}
});
})

我稍微修改了你的代码片段。希望它会有用

函数termsChecked（）{
返回$（“#条款”）。为（“：选中”）；
}
$（“#upsellyes”）。单击（函数（）{
if（termsChecked（））{
警惕（“你好”）；
}
});
$（文档）.ready（函数（）{
$（“#upsellyes”）。单击（函数（）{
如果（！termsChecked（））{
$（“#所需条款”）.css（'border'，'3px实心红色'）；
}
否则{
$（“#所需条款”）.css（'边框'，'无'）；
}
});
})；

我有两个孩子*


或

我稍微修改了你的代码片段。希望它会有用

函数termsChecked（）{
返回$（“#条款”）。为（“：选中”）；
}
$（“#upsellyes”）。单击（函数（）{
if（termsChecked（））{
警惕（“你好”）；
}
});
$（文档）.ready（函数（）{
$（“#upsellyes”）。单击（函数（）{
如果（！termsChecked（））{
$（“#所需条款”）.css（'border'，'3px实心红色'）；
}
否则{
$（“#所需条款”）.css（'边框'，'无'）；
}
});
})；

我已经死了