<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Checkbox Widget Demo</title>
<script type="text/javascript">
var djConfig = {isDebug: true};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.Checkbox");
</script>
<script>
function outputValues(form){
var str = "";
for(var i=0;i<form.elements.length;i++){
var e = form.elements[i];
if(e.type=="submit") break;
str += "submit: name="+e.name+" id="+e.id+" value="+e.value +" disabled="+e.disabled+" checked=" + e.checked + "<br>";
}
dojo.byId("result").innerHTML = str;
return false;
}
dojo.addOnLoad(function(){
var params = {id: "cb6", widgetId: "cb6", name: "cb6"};
var widget = dojo.widget.createWidget("Checkbox", params, document.getElementById("checkboxContainer"));
});
</script>
</head>
<body style="padding: 50px;">
<p>
Here are some checkboxes. Try clicking, and hovering:
</p>
<p>
<form onSubmit="return outputValues(this);">
<input type="checkbox" name="cb0" id="cb0" />
<label for="cb0">cb0: Vanilla (non-dojo) checkbox (for comparison purposes)</label>
<br>
<input type="checkbox" name="cb1" widgetId="cb1" value="foo" dojoType="Checkbox">
<label for="cb1">cb1: normal checkbox, with value=foo</label>
<br>
<input type="checkbox" name="cb2" id="cb2" dojoType="Checkbox" checked="checked"/>
<label for="cb2">cb2: normal checkbox, initially turned on</label>
<br>
<input type="checkbox" name="cb3" id="cb3" dojoType="Checkbox" disabled="disabled">
<label for="cb3">cb3: disabled checkbox</label>
<br>
<input type="checkbox" name="cb4" id="cb4" dojoType="Checkbox" disabled="disabled" checked="checked"/>
<label for="cb4">cb4: disabled checkbox, turned on</label>
<br>
<input type="checkbox" name="cb5" id="cb5" />
<label for="cb5">cb5: Vanilla (non-dojo) checkbox (for comparison purposes)</label>
<br>
<div id="checkboxContainer"></div>
<label for="checkboxContainer">cb6: instantiated from script</label>
<br>
<input type="submit" />
</form>
</p>
<p>Submitted data:</p>
<div id="result"></div>
</body>
</html>