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

标签 javascript jquery forms checkbox required

我有一个网站表单,其中只有在选中复选框时才需要我需要的字段(使用 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>     

任何帮助将不胜感激。

最佳答案

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

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

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

所需的属性文档是 here .

关于JavaScript 如果复选框被选中则不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16159592/

相关文章:

javascript - jquery css 函数不适用于检测显示/隐藏的元素

javascript - Jquery 在 DOM 中找不到 id

javascript - 在图片库中使用 ajax 加载图片

Django - 使用 context_processor

javascript - Ajax 请求命中或未命中 PHP SQL 提交

javascript - Javascript 中的总和格式金额返回 NaN

javascript - 如何在 <div> 标签内 .append() 用户输入?

javascript - 为什么单选按钮中需要不规则的消息(jquery 验证)?

javascript - 如何仅使用 css 或 jquery 自动播放轮播

php - Laravel 5.x 表单最佳实践