Javascript:選択したラジオボタンのチェックを外す方法

ラジオボタン選択後にチェックしたものを外したい場合があります。
Javascriptを使用すればチェックしたラジオボタンをリセットすることが可能です。

Javascriptを使用し選択されているラジオボタンチェック外す方法をメモします。


選択したラジオボタンのチェックを外す

HTML

チェックを外すためのリンクを用意し、クリックした際にJavascriptを呼び出します。

<a href="javascript:void(0);" onclick="resetradio()">リセット</a>

ラジオボタンのidを連番で指定します。

<label for="radio1"><input type="radio" name="hoge" id="radio1" value="1" />ラジオボタン1</label>
<label for="radio2"><input type="radio" name="hoge" id="radio2" value="2" />ラジオボタン2</label>
<label for="radio3"><input type="radio" name="hoge" id="radio3" value="3" />ラジオボタン3</label>
<label for="radio4"><input type="radio" name="hoge" id="radio4" value="4" />ラジオボタン4</label>
<label for="radio5"><input type="radio" name="hoge" id="radio5" value="5" />ラジオボタン5</label>

javascript

呼び出されたらラジオボタンの数だけfor文でループさせ、ラジオボタンのチェックを外しています。

<script type="text/javascript">
function resetradio() {
    for (i = 1; i <= 5; i++) {
        document.getElementById('radio' + i).checked = false;
    }
}
</script>

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です