README

关于

通过在隐藏的数据属性中按数组选择多个复选框，根据相关选中的复选框启用/禁用按钮。

支持主复选框全选，按钮可以设置根据其限定条件选中框。

由 Reece Fowell <reece [at] codeconsortium [dot] com>

设置

要使用此插件，请将 jQuery 添加到您的网站。

此插件是在 jQuery 1.7.1 上构建的。

使用很简单，只需将以下数据属性添加到复选框列表的容器中，如下所示

<div data-checkboxes>
	<input type="checkbox" id="check_all" name="check_all" data-master-checkbox="1">
	
	<table>
		<tr>
			<td><input type="checkbox" name="message_1" data-qualifiers='["unread", "flagged"]'></td>
			<td>RE: Electronic Flight tickets</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="message_2" data-qualifiers='["unread"]'></td>
			<td>RE: How did your trip go?</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="message_3" data-qualifiers='["read", "junk", "spam", "flagged"]'></td>
			<td>RE: Buy cr@pola now for $$$</td>
		</tr>
	</table>
</div>

上面的只是一个简单的示例，展示了在实际中的使用。

注意，包装 div 中的 'data-checkboxes'，jQuery.Checkboxes 会检测到这一点，并为您设置插件。

与该插件相关的任何其他内容，如主复选框、按钮等，应位于具有数据属性的容器中。

您不必使用表格来包含复选框，您可以将它们放在其他地方，比如 say divs 按行排列。

主复选框

主复选框工作所需的一切，只需添加 'data-master-checkbox="1"' 属性。

最好通常将其放在表格标题中，或远离常规复选框，以免混淆用户。

<input type="checkbox" name="check_all" data-master-checkbox="1">

限定条件

限定条件是一种标签，用于标识复选框和按钮。当使用按钮选择包含某些限定条件的复选框时，例如 "垃圾" 等，所有带有限定条件 "垃圾" 的复选框都将被选中。

限定条件应采用有效的 JSON 数组格式，因此数组中的每个限定条件都必须用双引号引起来，并全部放在一对方括号内。由于转义，包含数组的字符串必须用单引号包裹，如下所示

<input type="checkbox" name="message_1" data-qualifiers='["read", "junk", "flagged"]'>

如果数据属性 'data-qualifiers' 不遵循 JSON 数组格式，则插件可能无法正常工作。

每个复选框都应该有 data-qualifiers 属性，如果您没有限定条件的属性，则使用空括号以确保它仍然是一个有效的 JSON 风格数组，如下所示。

<input type="checkbox" name="message_1" data-qualifiers='[]'>

记住，不要用双引号包裹数组，否则它将不起作用。

以下是一个示例，下拉菜单采用 twitter-bootstrap 风格，每个链接都有一个 'data-qualifier' 属性和一个 'data-select-none' 属性。

<div class="btn-group">
	<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
		<i class="icon-check"></i>
		<span class="caret"></span>
	</a>
	<ul class="dropdown-menu">
		<li>
			<a href="#" data-select-none="true">None</a>
		</li>
		<li>
			<a href="#" data-qualifier="read">Read</a>
		</li>
		<li>
			<a href="#" data-qualifier="unread">Unread</a>
		</li>
		<li>
			<a href="#" data-qualifier='["junk", "spam"]'>Junk</a>
		</li>
	</ul>
</div>

任何链接或按钮上的 'data-qualifier' 都会找到并选择容器内的所有复选框，并在点击时勾选它们。

值可以是有效的 JSON 数组，也可以是字符串，插件将处理其他部分。

只要声明的限定条件可以在一个或多个复选框中找到，它们就会被勾选。

注意，'data-select-none' 可以用来取消选择所有复选框。

引导

如果您想以其他方式启动插件，而不是在包含元素中的 'data-checkboxes' 属性内，请使用以下内容，并用您选择的选择器替换

<head>
	<script type="text/javascript">
		$(document).ready(function() {
			$('div.checkboxes').checkboxes();
		});
	</script>
</head>

reecefowell / jquery-checkboxes

维护者

详细信息

README

关于

设置

主复选框

限定条件

引导