javascript - 复选框 $.change 被自身触发并循环，因为它正在 $.change 内部被修改

Question

我有一组复选框，当您单击其中一个时，它们应该全部被选中。

当用户单击一个复选框时，它会检查以该类名称开头的所有其他复选框。我想要的是用户单击一个复选框，并且每次单击仅触发一次 $(".atpSelections").change。

代码如下:

        $(".atpSelections").change(function() {
            console.log("CHANGED");

            //Check ALL other checkboxes starting with that class name:
            var className = $(this).attr("class");
            className=className.replace("atpSelections ", "");
            className=className.trim();
            className=className.split("-");

            //Get current checkbox state
            var currentState = $(this).attr("checked");

            //Now loop through all other checkboxes starting 
            //with the same class name and check them:
            $("input[class*='"+className[0]+"-']").each(function(i){
                    //THIS IS TRIGGERING "$(".atpSelections").change"!!
                    if(currentState && currentState=="checked")
                    {
                        $(this).prop('checked', true);
                    }else
                    {
                        $(this).prop('checked', false);
                    }
                });
        });

问题

问题是，当用户单击一个复选框时，$(".atpSelections").change 方法会被一遍又一遍地触发，因为 $( this).prop('checked', true); 再次触发 $(".atpSelections").change，然后就这样周而复始。

因此，单击一个复选框就会触发 100 秒的“更改”事件，而我只希望它触发一次。

如何更改 $(".atpSelections").change 内复选框的状态而不触发 $(".atpSelections").change 再次？

尝试

我尝试将 $(".atpSelections").change 更改为 $(".atpSelections").click 但遇到了同样的问题。我认为 $(this).prop('checked', true); 触发 click 事件。

解决方案

我使用了@James的答案并进行了更改

var currentState = $(this).attr("checked");

至

var currentState = $(this).prop("checked") ? “已检查”:“”；

而且效果非常好!谢谢。

这是 JSFiddle: https://jsfiddle.net/zL7amo0y/

Answer 1

问题出在您的 currentState 变量上。请执行 console.log 操作。我猜它是未定义的？

下面是在 jQuery 和 Vanialla JS 中修复的代码。

JQuery:

       $(".atpSelections").change(function() {

            var currentState = $(this).prop("checked");
            console.log(currentState);

            $("input[name='checkboxToCheck']").each(function(i){
                    if(currentState)
                    {
                        $(this).prop('checked', true);
                    }else
                    {
                        $(this).prop('checked', false);
                    }
                });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm">
			<label for="checkbox1">Main Checkbox:</label>
			<input class="atpSelections" value="checkbox1" type="checkbox" id="checkbox1" />

			<label for="checkbox2">Checkbox2:</label>
			<input name="checkboxToCheck" value="checkbox1" type="checkbox" id="checkbox1" />

			<label for="checkbox3">Checkbox3:</label>
			<input name="checkboxToCheck" value="checkbox1" type="checkbox" id="checkbox1" />
		</form>

普通 JS:

			var checkbox = document.getElementById("checkbox1")
			var checkboxToCheck = document.getElementsByName("checkboxToCheck");
			checkboxToCheck = [].slice.call(checkboxToCheck);

			function checkAllBoxes() {

				checkboxToCheck.forEach((element) => {
					if (checkbox.checked) {
						element.checked = true;
					} else {
						element.checked = false;
					}
				});

			}

			checkbox.addEventListener("change", checkAllBoxes);

		<form name="myForm">
			<label for="checkbox1">Main Checkbox:</label>
			<input value="checkbox1" type="checkbox" id="checkbox1" />

			<label for="checkbox2">Checkbox2:</label>
			<input name="checkboxToCheck" value="checkbox1" type="checkbox" id="checkbox1" />

			<label for="checkbox3">Checkbox3:</label>
			<input name="checkboxToCheck" value="checkbox1" type="checkbox" id="checkbox1" />
		</form>