零細システムエンジニアの備忘録

RPA、サーバ、ネットワークに関する設定メモ、導入相談もコメント欄やメールに頂ければお答えしますのでお気軽にご相談下さい(^^)

【HTML/JavaScript】ラジオボタンで特定の項目を選択した場合にテキスト入力を必須にする方法

ちょうど仕事で入力必須にする必要があったのでそちらのメモになります。

◆やりたいこと
お休み連絡の理由をラジオボタンにして、理由が【その他】の場合は、テキスト入力させたい。
まずHTMLは下記のように記載。

◆HTML

お休みの理由
<label><input type="radio" name="cancel_reason" value="体調不良" required onclick="check(0)">体調不良</label><br/>
<label><input type="radio" name="cancel_reason" value="車両故障" onclick="check(1)">車両故障</label><br/>
<label><input type="radio" name="cancel_reason" value="天候不良" onclick="check(2)">天候不良</label><br/>
<label><input type="radio" name="cancel_reason" value="その他" onclick="check(3)">その他 </label>
<input type="text" name="remark" id="remark" class="form-control mar-btm" placeholder="" value="" required>
<div id="display" style="color:red;display:none;">理由を入力してください</div>

【remark】の部分を【required】を追記して、必須にしています。当然そのままだと、ほかの選択肢を選択しても、テキストが必須になってしまうため
他を選択した場合は、半角スペースを入れて回避します。

javascript

script type="text/javascript">
function check(num){
    var radio = document.getElementsByName("cancel_reason");
    var textValue = document.getElementById(remark);

    if(radio[3].checked){   //ここにHTMLで「その他」に書かれている番号を設定します。【onclick="check(3) →これ】
        remark.value = '';
        document.getElementById("display").style.display="block";
    } else {
        remark.value = ' ';
        document.getElementById("display").style.display="none";
    }
}
</script>


※HTML側で【onclick="check(0)】のようにすることで、javascriptを呼び出しています。
選択肢毎にnumを設定しておき、【その他】以外を選択した場合に半角スペースを入れています。