Question

我的页面上有2个复选框。第一个ID为“ status_1”，第二个ID为“ status_2”

我想使两者都必须在页面加载时同时选中，并且在尝试同时取消选择两者时始终保持选中状态。

例如，如果选择了“ status_1”，则未选择“ status_2”，并且用户尝试也取消选择“ status_1”，则“ status_2”会自动选择。

Answer 1

在此，这是给新用户的不错的欢迎礼物：-)
通常，我们希望看到您尝试过的内容，因此我们有一些努力的证明，因为StackOverflow并不是免费的编程服务。

此代码预订两个复选框的onchange事件，如果两个都未选中，则检查另一个。由于每种情况下的实际逻辑都是相同的，因此我将其移至一个函数中以避免重复代码。

function checkOther(a, b)
{
  if (!a.checked && !b.checked)
    b.checked = true;
}

window.addEventListener("load", function () {
  var s1 = document.querySelector("input[type='checkbox'][name='status_1']");
  var s2 = document.querySelector("input[type='checkbox'][name='status_2']");
  s1.addEventListener("change", function (e) {
    checkOther(e.target, s2);
  });
  s2.addEventListener("change", function (e) {
    checkOther(e.target, s1);
  });
}

<input type="checkbox" name="status_1" checked="checked" /> 1<br />
<input type="checkbox" name="status_2" checked="checked" /> 2

Answer 2

if (!$("#checkbox1").is(":checked") && !$("#checkbox2").is(":checked")) {
    // both of them are unchecked u can eather check one or drop error
}

您可以在元素更改时启动它。

$("#checkbox1").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

因此从理论上讲，您可以创建一个函数来检查是否未选中并通过回调完成它。

JS始终选中2个复选框中的1个

2 个答案: