JavaScript控制input输入框的required属性值

JavaScript控制input输入框的required属性值

---

当我们在勾选上一个复选框之后，希望该选项的输入框成为必填项时，那么将会用到required这个属性

在HTML中，required为属性。在JavaScript中，required的默认属性值为false，也就是非必填项。

---

举个例子

<div class="custom-control custom-checkbox mb-1 mt-3">
    <input name="jobs" type="checkbox" class="custom-control-input" id="body1" value="选项1" onchange="change(this)">
    <label class="custom-control-label" for="body1">选项1</label>
</div>
<input id="body1-1" type="text" placeholder="请输入">

<script type="text/javascript">
    function change(target){
        var value = document.getElementById(target.value + "-1").required

        document.getElementById(target.value + "-1").required = !value;
    }
</script>

解释一下：

当我们点击“选项1”时，会触发change这个方法，将body1-1的required的值赋值给value这个变量。然后重新为body1-1的required赋值非value。

!value意思是，如果value=true，那么赋值false；如果value=false，那么赋值true。正好也省了if判断。