单击复选框时的 Jquery 事件处理
Jquery event handling when a checkbox is clicked
edit 更新了完整代码：
我正在处理我的第一个 Javascript 案例，我被困在这里：
我有以下几点：
$(document).ready(function()
{
$('input, select').on('focus' ,swapPersonClass);
//Blur = Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.
$('input, select').on("change", updateCart);
}
);
// Functions
var swapPersonClass = function()
{
var expression = $(this).attr('id');
switch(expression)
{
case "fullname":
break;
case "email":
$("#arm").removeClass().addClass("pointemail");
break;
case "countpizzas":
$("#arm").removeClass().addClass("pointamount");
break;
default:
$("#arm").removeClass().addClass("pointothers");
}
};
var updateCart = function () {
var change = $(this).attr('id');
console.log(change);
$('input, select').each(function ()
{
switch (change)
{
case "fullname":
$("#displayname").text($('#fullname').val() + ',');
break;
case "countpizzas":
aantalpizzas = $("#countpizzas").val();
if (aantalpizzas > 1) {
$('.plural').show();
} else {
$('.plural').hide();
};
$("#displayamount").text(aantalpizzas);
console.log(aantalpizzas);
break;
case "pizzatype":
PrijsPizza = $("#pizzatype option:selected").data("price");
console.log(PrijsPizza);
break;
case "YesOption":
$("#toppings").show();
break;
case "NoOption":
$("#toppings").hide();
break;
case "toppings":
updateTopping();
break;
};
$("#currenttotal").text(aantalpizzas * PrijsPizza );
});
};
var updateTopping = function ()
{
$(".chk_topping").change(function()
{
var selected_topping = $(this).attr('data-value');
switch(selected_topping)
{
case "salami":
$("#currenttotal").text(aantalpizzas * PrijsPizza );
PrijsTopping += 0.30;
break
}
});
};
var PrijsTopping = 0.30;
var aantalpizzas = 0;
var PrijsPizza = 0;<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css"/>
<link rel="stylesheet" href="assets/css/screen.css" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="container">
<header>
<h1>Pizza Palace</h1>
</header>
<aside>
<h2><span>Order details</span></h2>
<div id="total">
<p>Your current order total: € <strong id="currenttotal">0</strong></p>
</div>
<p><strong id="displayname"></strong> you are ordering <strong id="displayamount"></strong> pizza<span
class="plural">s</span></p>
<h3>Chosen toppings:</h3>
<div id="toppingmessage">
<p>No toppings selected</p>
<ul>
<li class="hide">Salami</li>
<li class="hide">Olives</li>
<li class="hide">Ansjovis</li>
</ul>
</div>
<h3>Your discount: </h3>
<p id="displaydiscount"></p>
</aside>
<form action="#" method="post">
<figure id="arm"></figure>
<figure id="face"></figure>
<fieldset class="personbody">
<form>
<div>
<label for="fullname">Full Name
<input id="fullname" name="fullnames" type="text" required autofocus>
</label>
</div>
<div>
<label for="email">Email
<input id="email" name="email" type="email" placeholder="Enter Your email" required>
</label>
</div>
<div>
<label for="howmany">How many pizzas would you like?<br><br>
<input id="countpizzas" name="countpizzas" type="number" min="1" max="3" step="1" value="0" required>
</label>
</div>
<div>
<label for="pizzatype">Which type of pizza would you like ? <br>
<select id="pizzatype"name="pizzatype">
<option data-price="4" value="S">Small</option>
<option data-price="5.5" value="M">Medium</option>
<option data-price="7" value="L">Large</option>
</select>
</label>
</div>
<div>
<label for="extratopping">Would you like extra topping? <br>
<input id="YesOption" name="ExtraTopping" type="radio"> Yes
<input id="NoOption" name="ExtraTopping" type="radio"> No
</label>
</div>
<div class="hide" id="toppings">
<label for="toppings">Which toppings would you like?</label>
<input type="checkbox" class="chk_topping" data-value="salami"> Salami
<input type="checkbox" class="chk_topping" data-value="olives"> Olives
<input type="checkbox" class="chk_topping" data-value="answersjovis"> Ansjovis
</div>
<div>
<label for="deliverydate">When do you want the pizza<span class="plural">s</span> to be delivered?
<input id="delivery" name="delivery" type="date" required > </label>
<label for="deliverytime">
<input id="Time" name="Time" type="time" required> </label>
</div>
<label for="discountcode">Do you have a discount code?
<input id="DiscountCode" name="DiscountCode" type="text" pattern="[1-9]{1}-[A-Z]{3}" title="The discount code should be a digit followed by a dash and then 3 uppercase letters" required>
</label>
</div>
</form>
<input type="submit" value="Place your order" name="placeorder"/>
</fieldset>
</form>
<footer><p>Graphics courtesy of © Basecamp </p></footer>
</div>
<script type='text/javascript' src='assets/js/jquery.js'></script>
<script type='text/javascript' src='assets/js/script.js'></script>
</body>
</html>为什么我的复选框在选择它们时一直告诉我它是未定义的？我真的不擅长javascript，所以我的代码可能会很糟糕
试试这个 var selected_topping = $(this).data('value');
http://jsfiddle.net/f4Lghy6p/
找到了。
我正在我的选择 en 输入字段中搜索特定的 ID： $（'input， select'）.on（"change"， updateCart）;
我的复选框位于带有没有 ID 的输入字段的 DIV 中。
相关文章：
- Jquery事件处理程序仅适用于匿名函数
- 如何在jQuery事件处理程序中存储和重用超时
- jQuery 事件处理程序堆叠
- 动态添加对象的jQuery事件处理程序
- event.stopPropagation(） 在 jQuery 事件处理程序中不起作用
- Typescript 此关键字在 jquery 事件处理程序中不起作用
- Jquery事件处理程序未启动
- 我在jQuery事件处理和隐藏/显示图像元素方面做错了什么
- 有没有办法扩展已经绑定的jQuery事件处理程序
- JQuery事件处理程序在事件发生前激发
- 正在取消绑定jQuery事件处理程序
- 如何在选择的按钮上动态/不断地绑定jQuery事件处理程序
- Jquery 事件处理程序未在 Rails 应用程序中触发
- 如何获取 jQuery 事件处理程序返回值
- 我的javascript变量在jquery事件处理程序上没有更新
- 我的按钮的 jQuery 事件处理程序只工作一次
- JavaScript 变量不会保留在 jQuery 事件处理程序中
- 如何将 JQuery 事件处理程序分配给特定事件
- JQuery - 事件处理程序中的 accessss 对象属性
- 如果不在 onLoad 函数中，jQuery 事件处理程序不起作用
