jQuery Validation插件：使用EqualTo规则验证复选框状态一致

你想用EqualTo规则来让两个复选框状态一致，但这里有个小坑——默认的EqualTo是比较表单元素的值，而复选框默认选中时的值是on，未选中时则没有值，直接用它没法完美实现“状态完全一致”的需求（比如A选中B未选中，或者反过来的情况）。

我给你两种可行的方案：

方案一：自定义验证规则（推荐） #

自定义一个专门检查复选框状态匹配的规则，逻辑更清晰，也更灵活：

首先确保你已经在页面中引入了jQuery库和jQuery Validation插件（可以通过本地文件引入，或者使用官方提供的资源）。

然后编写验证代码：

$(document).ready(function() {
  // 自定义验证规则
  $.validator.addMethod("checkboxMatch", function(value, element, param) {
    // 获取目标复选框的状态
    const targetCheckbox = $(param);
    // 比较当前复选框和目标复选框的checked状态是否一致
    return $(element).is(':checked') === targetCheckbox.is(':checked');
  }, "两个复选框的状态必须一致");

  // 初始化表单验证
  $("#form").validate({
    rules: {
      A: {
        checkboxMatch: "#B" // 让A和B的状态匹配
      },
      B: {
        checkboxMatch: "#A" // 让B和A的状态匹配，实现双向验证
      }
    },
    messages: {
      A: {
        checkboxMatch: "请确保复选框A和B状态一致"
      },
      B: {
        checkboxMatch: "请确保复选框B和A状态一致"
      }
    }
  });
});

这样不管是只勾选A还是只勾选B，点击提交都会触发验证提示，直到两个都勾选或者都不勾选，才能正常提交表单。

方案二：调整EqualTo规则的使用（仅作参考） #

如果一定要用EqualTo，可以给两个复选框设置相同的value值，利用它的“值匹配”逻辑来间接实现状态一致：

先修改你的HTML代码，给复选框加上相同的value：

<form id="form">
  <input id="A" name="A" type="checkbox" value="1"/> A<br />
  <input id="B" name="B" type="checkbox" value="1"/> B<br />
  <input type="submit" value="Submit" />
</form>

然后编写验证代码：

$(document).ready(function() {
  $("#form").validate({
    rules: {
      A: {
        equalTo: "#B"
      },
      B: {
        equalTo: "#A"
      }
    },
    messages: {
      A: {
        equalTo: "两个复选框状态必须一致"
      },
      B: {
        equalTo: "两个复选框状态必须一致"
      }
    }
  });
});

这个方案的原理是：当两个复选框都选中时，值都是1，EqualTo会判定匹配；当都未选中时，值都是空，也会判定匹配；但如果一个选中一个未选中，值一个是1一个是空，就会触发验证。不过这种方式不如自定义规则直观，后续如果修改复选框的value还要同步调整，所以更推荐方案一。

内容的提问来源于stack exchange，提问作者LonelyNeptune