Question

我正在构建一个表单，在其中的一部分我有两个带有值的单选按钮＆＃34; No＆＃34;和＆＃34;是＆＃34;分别。我有两个checkcbox字段。我希望用户在选择YES单选按钮时至少选择一个复选框字段，并在选择单选按钮No时重置复选框字段。

我正在尝试编写一个能够执行以下操作的JavaScript：

a）在加载时，所有字段都处于活动状态，这是选择其中一个单选按钮所必需的。

b）如果radioGroup1 /＆＃34; No＆＃34;选中，重置复选框字段的值并使其无效。

b）如果radioGroup2 /＆＃34;是＆＃34;选中使复选框字段处于活动状态，并使其至少选择一个。

我还没到达任何地方。有人能给我指点吗？感谢

<label><input type="radio" name="radioGroup" id="radioGroup1" value="No">No</label>
<label><input type="radio" name="radioGroup" id="radioGroup2" value="Yes">Yes(Year/City)</label>

<div class="checkboxGroup">
  <label><input type="checkbox" name="checkboxGroup[]" id="checkboxGroup1" value="Value 1">Value 1</label>
  <label><input type="checkbox" name="checkboxGroup[]" id="checkboxGroup2" value="Value 2">Value 2</label>
</div>

Answer 1

我不知道你是否可以选择使用jQuery - 如果是，我只是做了Fiddle

$("input[type='radio']").click(function () {
 if ($(this).val() == "No") {
    $("input[type='checkbox']").prop("disabled",true);
    $("input[type='checkbox']").prop("checked", false);
}
else {
    $("input[type='checkbox']").prop("disabled", false);
  }
});

如果它必须是纯粹的javascript，只需删除评论，这只需要几分钟。

更新：根据要求提供纯Javascript解决方案：

document.getElementById("radioGroup1").onclick = function () {
  var elems = document.getElementsByClassName('checkbox');
  for (var i = 0; i < elems.length; i++) {
    elems[i].checked = false;
    elems[i].disabled = true;
  }
};
document.getElementById("radioGroup2").onclick = function () {
  var elems = document.getElementsByClassName('checkbox');
  for (var i = 0; i < elems.length; i++) {
    elems[i].disabled = false;
  }
};

对此进行HTML调整是为复选框添加class =“checkbox” 可以调整为只有一个onclick用于调用一个函数的无线电，然后检查单击的单选按钮的值并具有上面的jQuery-approach的if / else，但就像快速示例一样。

Fiddle - Javascript-Version

如何在选中某个单选按钮时使复选框组处于活动或非活动状态？

1 个答案: