dojo CheckBox问题解析

dojo版本:1.6

在使用dojo的dijit.form.CheckBox组件过程中发现了如下两个问题:

一、是无法方便地指定其label,虽然CheckBox组件有一个label属性,

但是设置了并不能达到想要的效果,label依然不显示,因为根本就没有为checkbox添加<label>标签。如下:

<input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" label="足球">

 产生的checkbox却无标签

我的解决办法是扩展CheckBox组件,创建CheckBox组件后自动添加<label>标签,代码如下:

dojo.provide("my.widget.CheckBox");

dojo.require("dijit.form.CheckBox");
dojo.declare("my.widget.CheckBox",dijit.form.CheckBox, {
	
	startup : function() {
		this.inherited(arguments);
		// 使用jQuery
		//var html = '<label for="' +this.id+ '" style="display:inline;float: none;padding-right:0;">' +this.labelText+ '</label>';
		//$(this.domNode).after(html);
		
		// 直接使用JS
		var label = document.createElement("label");
		label.setAttribute("for", this.id);
		label.innerText = this.labelText;
		// 覆盖dojo默认label样式
		label.style.display = "inline";
		label.style.float = "none";
		label.style.paddingRight = "0";
		
		this.insertAfter(label, this.domNode);
	},
	
	insertAfter : function (newElement, targetElement) {
   		var parent = targetElement.parentNode;
   		if (parent.lastChild == targetElement ) {
        	// 如果最后的节点是目标元素,则直接添加。因为默认是最后
        	parent.appendChild(newElement );
   		} else {
        	//如果不是,则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面
        	parent.insertBefore( newElement, targetElement.nextSibling );
   		}
	},
	labelText : ""
});

二、在做全选功能时,发现CheckBox事件循环传递,导致达不到预期效果,解决办法如下:

<script type="text/javascript">
	dojo.require("my.widget.CheckBox");
	
	dojo.addOnLoad(function(){
		var selectAllCheckBox = dijit.byId("selectAll");
		// 为全选CheckBox注册onClick事件,当然onChange也可以
		var handle = dojo.connect(selectAllCheckBox, "onClick", window, "selectAll");
		var widgets = dijit.findWidgets(document.getElementById("sportsDiv"));
		
		dojo.forEach(widgets, function(checkbox, index){
			dojo.connect(checkbox, "onChange", function(checked){
				console.log(checkbox.get("id") + ":" + checked);
				if(!checked) {
					dojo.disconnect(handle);
					// 设置checked属性时,会触发全选CheckBox的onClick事件,所以在此之前须先断开
					// 否则事件会循环触发
					selectAllCheckBox.set("checked", false);
				} else {
					var hasUnchecked = false;
					for(var i=0; i<widgets.length; i++) {
						console.log(widgets[i].get("checked"));
						if(!widgets[i].get("checked")) {
							hasUnchecked = true;
						}
					}
					if(!hasUnchecked) {
						// 设置checked属性时,会触发全选CheckBox的onClick事件,所以在此之前须先断开
						// 否则事件会循环触发
						dojo.disconnect(handle);
						selectAllCheckBox.set("checked", true);
					}
				}
			});
			// 最后,为全选CheckBox重新注册onClick事件监听
			handle = dojo.connect(selectAllCheckBox, "onClick", window, "selectAll");
		});
		
	});
	
	function selectAll(event) {
		var selectAllCheckBox = dijit.byId("selectAll");
		var checked = selectAllCheckBox.get("checked");
		var widgets = dijit.findWidgets(document.getElementById("sportsDiv"));
		dojo.forEach(widgets, function(checkbox, index){
			checkbox.set("checked", checked);
		});
	}
</script>
</head>
<body class="claro">
	<form action="" id="reg_form">
		<div class="grouping">
			<div>
				<input type="checkbox" dojoType="my.widget.CheckBox" name="select-all" id="selectAll" labelText="全选">
			</div>
			<div id="sportsDiv">
				<div>
					<input type="checkbox" dojoType="my.widget.CheckBox" name="sports" value="football" id="football" labelText="足球">
					<input type="checkbox" dojoType="my.widget.CheckBox" name="sports" value="basketball" id="basketball" labelText="篮球">
				</div>
			</div>
		</div>
	</form>
</body>


你可能感兴趣的:(checkbox,全选,dojo,label,dijit)