<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo: Dijit CheckBox/RadioButton onChange</title>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="css/demo.css" media="screen" type="text/css">
</head>
<body class="claro">
<h2>Using onChange</h2>
<h3>Pizza Toppings</h3>
<ul style="list-style-type: none">
<li>
<input id="topping1" name="topping" type="radio" value="anchovies" checked
data-dojo-type="dijit/form/RadioButton">
<label for="topping1">Anchovies</label>
</li>
<li>
<input id="topping2" name="topping" type="radio" value="pineapple"
data-dojo-type="dijit/form/RadioButton">
<label for="topping2">Pineapple</label>
</li>
</ul>
<div id="toppingNote">Likes the salty!</div>
<h3>Crust</h3>
<p>
<input id="crust" name="crust" type="checkbox" value="thick"
data-dojo-type="dijit/form/CheckBox">
<label for="crust">Thick Crust</label>
</p>
<div id="crustNote"></div>
<script src="dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
<script>
require(["dijit/form/RadioButton", "dijit/registry", "dojo/parser", "dojo/domReady!"], function(RadioButton, registry, parser){
parser.parse();
var summaryNode = document.getElementById("toppingNote"),
remarkNode = document.getElementById("crustNote");
registry.byId("topping1").on("change", function(isChecked){
if(isChecked){
summaryNode.innerHTML = "Likes the salty!";
}
}, true);
registry.byId("topping2").on("change", function(isChecked){
if(isChecked){
summaryNode.innerHTML = "Likes the sweet!";
}
}, true);
registry.byId("crust").on("change", function(isChecked){
remarkNode.innerHTML = isChecked ? "Healthy gums!" : "";
}, true);
});
</script>
</body>
</html>
结果如下：
大概的意思是说：选第一就是喜欢咸盐，选第二个是喜欢甜口。
Crust 是硬皮，选中了硬皮就是意味着好的牙口，口齿伶俐咬得动。