选中所有素色的复选框

时间:2018-10-05 10:38:42

标签: javascript checkbox primefaces selectmanycheckbox selectbooleancheckbox

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

如果选中了“全选”,则选中了“项目1”和“项目2”。如果未选中“全选”,则未选中“项目1”和“项目2”。
如果未选中“项目1”或“项目2”之一,则应选中“全选”。如果同时选中了“项目1”和“项目2”,则应自动选中“全选”。

要实现这一点,我将javascript用于每个复选框的onchange事件。
对于全选,onchange = updateOtherCheckboxes(otherCheckboxs,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(otherCheckbox,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()函数中,其他复选框的click事件被触发,并且updateSelectAllCheckbox将被调用,但我不希望这样做。因此,如何在触发click事件后阻止在updateCheckboxes()函数中调用updateSelectAllCheckbox()函数。

1 个答案:

答案 0 :(得分:0)

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

如果click不起作用,您也可以尝试:$(this).prop('checked', true)