技術標籤：HTMLjavascriptcheckboxrequired控制

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判斷。