mootools弹框_使用MooTools选中所有/无复选框-CSDN博客

mootools弹框

There's nothing worse than having to click every checkbox in a list. Why not allow users to click one item and every checkbox becomes checked? Here's how to do just that with MooTools 1.2.

没有比单击列表中的每个复选框更糟糕的了。为什么不允许用户单击一个项目，并且选中每个复选框？使用MooTools 1.2的方法如下。

View Demo 观看演示

XHTML (The XHTML)


<table>
	<tr>
		<th width="30"><img src="checkboxes/uncheck.jpg" id="ucuc" /></th><th>Title</th>
	</tr>
	<tr>
		<td><input type="checkbox" name="approve[]" class="check-me" value="Braveheart" /></td>
		<td>Braveheart</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="approve[]" class="check-me" value="Gladiator" /></td>
		<td>Gladiator</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="approve[]" class="check-me" value="The Patriot" /></td>
		<td>The Patriot</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="approve[]" class="check-me" value="300" /></td>
		<td>300</td>
	</tr>
</table>

Note the image with the ucuc ID -- that image will be the checkbox trigger.

注意具有ucuc ID的图像-该图像将成为复选框触发器。

CSS (The CSS)

#ucuc	{ cursor:pointer; }

Give the image the pointer cursor for enhanced usability.

为图像提供指针光标以增强可用性。

MooTools 1.2 JavaScript (The MooTools 1.2 JavaScript)


window.addEvent('domready', function() {
	var ucuc = $('ucuc');
	ucuc.addEvent('click', function() {
		if(ucuc.get('rel') == 'yes') {
			do_check = false;
			ucuc.set('src','checkboxes/uncheck.jpg').set('rel','no');
		}
		else {
			do_check = true;
			ucuc.set('src','checkboxes/check.jpg').set('rel','yes');
		}
		$$('.check-me').each(function(el) { el.checked = do_check; });
	});
});

Extremely simple: read in whether to check or uncheck the boxes, take the appropriate action, and swap out the images.

非常简单：阅读是选中还是取消选中这些框，采取适当的措施，然后交换图像。

View Demo 观看演示