检查checkbox是否被选中
$('input:checkbox').each(function () // 循环每个checkbox
parseInt($(this).val();// 计算 check box的值
<!DOCTYPE html">
<html>
<head>
<title></title>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">
.infobox
{
margin-top: 15px;
}
.error
{
color: Red;
}
</style>
<script type="text/jscript">
$(document).ready(function () {
$('.error').hide();
$('.submit').click(function (event) {
var count = 0;
var amt = 0;
// 循环每个checkbox
$('input:checkbox').each(function () {
if ($(this).is(':checked')) {
count++;
// 计算 check box的值
amt = amt + parseInt($(this).val());
}
});
if (count == 0) {
$('.result').hide();
$('.error').show();
}
else {
$('.error').hide();
$('.result').show();
$('.result').text("your bill is $" + amt);
}
// 防止事件提交
event.preventDefault();
});
});
</script>
</head>
<body>
<form>
<input type="checkbox" id="pizza" name="pizza" value="5" />pizza $5<br />
<input type="checkbox" id="hotdog" name="hotdog" value="2" />hotdog $2<br />
<input type="checkbox" id="coke" name="coke" value="1" />coke $1<br />
<input type="checkbox" id="fries" name="fries" value="3" />fries $3<br />
<p>
select at least one checkbox</p>
<p>
</p>
<input type="submit" value="submit" />
</form>
</body>
</html>
