时间戳

首页 > 解决方案 > 选中primefaces中的所有复选框

javascript - 选中primefaces中的所有复选框

问题描述

逻辑的要求是：
- 我有一个复选框列表（我使用 p:selectManyCheckbox）。
- 我还有一个复选框，如果它被选中，其他复选框也应该被选中（我为此使用 p:selectBooleanCheckbox）
- 让我举一个具体的例子，现在我有 3 个复选框：
+ 全选
+ 项目 1
+ 项目2

如果选中“全选”，则选中“项目 1”和“项目 2”。如果未选中“全选”，则未选中“项目 1”和“项目 2”。
如果未选中“项目 1”或“项目 2”之一，则应取消选中“全选”。如果同时选中了“item 1”和“item 2”，则应自动选中“select all”。

为了实现这一点，我使用 javascript 来处理每个复选框的 onchange 事件。
对于全选，onchange = updateOtherCheckboxes(otherCheckboxes, selectAllCheckbox) 

function updateCheckboxes(otherCheckboxes, selectAllCheckbox) {
	otherCheckboxes.inputs.each(function() {
		if (selectAllCheckbox.isChecked()) {
			$(this).prop('checked', false);
		} else {
			$(this).prop('checked', true);
		}
		$(this).trigger('click');
	});
}

对于其他复选框，onchange = updateSelectAllCheckbox(otherCheckboxes, selectAllCheckbox)

function updateSelectAllCheckbox(otherCheckboxes, selectAllCheckbox) {
	var notAllCheckboxesChecked = false;
	otherCheckboxes.inputs.each(function() {
		if ($(this).is(':checked') == false) {
			notAllCheckboxesChecked = true;
			return false;
		}
	});
	if (notAllCheckboxesChecked && selectAllCheckbox.input.is(':checked') == true) {
		selectAllCheckbox.input.trigger('click');
	} else if (!notAllCheckboxesChecked && selectAllCheckbox.input.is(':checked') == false) {
		selectAllCheckbox.input.trigger('click');
	}
}

这里的问题是，在 updateCheckboxes() 函数中，会触发其他复选框的单击事件并调用 updateSelectAllCheckbox，但我不希望这样。那么在触发点击事件后，如何防止在 updateCheckboxes() 函数中调用 updateSelectAllCheckbox() 函数。

标签： javascriptcheckboxprimefacesselectmanycheckboxselectbooleancheckbox

解决方案

您不必调用$(this).trigger('check')，因为这将触发 click 事件，您之前的代码$(this).prop('checked', true)已经确保复选框将被选中，因此您不必再触发click事件。

如果$(this).prop('checked', true)不起作用，您还可以尝试：$(this).attr('checked', true);

推荐阅读