JavaScript 如果复选框被选中则不起作用

Question

我有一个网站表单，其中只有在选中复选框时才需要我需要的字段(使用 JQuery 插件)。

到目前为止，我编写的 JavaScript 在复选框未选中或选中时都可以工作。但是，当用户选中该复选框然后取消选中它时，代码将不起作用(未选中时字段仍然是必填的)。

另外一个错误是由于某种原因，相同的代码仅适用于更新仅需要 bool 值的一项。例如，如果我有相同的代码，但更新了两个元素要求，则脚本根本不起作用。

相关源码如下:

<script>
function swap(){
  if(document.getElementById('must').checked){     
    document.getElementById("element1").setAttribute("required", "true");
  }else{      
    document.getElementById("element1").setAttribute("required", "false");
  }
}
</script>


<form>
<input type="checkbox" onclick="swap();" id="must" name="must" value="1" style="width:10;">
<input id="element1" type="text" name="element1" placeholder="Enter Value" >
<input type="submit" id="submit" name="submit" value="Send" >
</form>     

任何帮助将不胜感激。

Answer 1

我知道检查checkbox是否checked的最佳方法是使用jQuery is()方法( documentation )。它为您处理不同浏览器的差异。向 HTML 元素添加属性的最佳方法是使用 attr() 方法。

if($("#must").is(":checked")) {
    $("#element1").attr('required', 'required');
} else {
    $("#element1").removeAttr();
}

您可以在 DOM 检查器中检查是否添加了属性。

所需的属性文档是 here .