【JavaScript基礎】HTMLのチェックボックスの作成とチェックの状態の取得

2023年7月19日2023年9月22日

URLをコピーしました！

JavaScript

前回、JavaScriptのライブライjQueryのAjaxを使ってJavaScriptからPythonを実行する方法を紹介しました。

チェックボックスの作成

チェックボックスの作成は「<input type=”checkbox” id=”ID”></input>」で作成します。

またチェックが入った状態を初期値とする場合はさらに「checked」を追加し、「<input type=”checkbox” id=”ID” checked></input>」とします。

またそのチェックボックスにラベルを設定する場合はinputタグの後ろに「<label>ラベル</label>」を追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

    <input type="checkbox" id="checkbox1"><label>checkbox1</label>
    <input type="checkbox" id="checkbox2" checked><label>checkbox2</label>

<script>
</script>
</body>
</html>

チェックボックスの状態の取得

JavaScriptでチェックボックスの状態を取得するには、「変数 = document.getElementById(“チェックボックスのID”);」でチェックボックスの情報を取得します。

そして「変数.checked」でチェックが入っている場合は「true」、入っていない場合は「false」を受け取ることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

    <input type="checkbox" id="checkbox1"><label>checkbox1</label>
    <button onclick="buttonclick()">Button</button>
    <div id="text"></div>

<script>
    function buttonclick(){
        let checkbox1 = document.getElementById("checkbox1");
        let text = document.getElementById("text");

        text.innerHTML = checkbox1.checked;
    }
</script>
</body>
</html>

checkbox1

値の取得

チェックボックスには値を設定することができます。

その場合は「<input type=”checkbox” id=”ID” value=”値”></input>」でチェックボックスを設置します。

JavaScriptでは「変数 = document.getElementById(“チェックボックスのID”);」でチェックボックスの情報を取得した後、「変数.value」で値を取得します。

こちらのプログラムではチェックボックスがチェックされていると、チェックボックスに紐つけられた値「１」が表示され、チェックされていない場合は「False」が表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

    <input type="checkbox" id="checkbox1" value="1"><label>checkbox1</label>
    <button onclick="buttonclick()">Button</button>
    <div id="text"></div>

<script>
    function buttonclick(){
        let checkbox1 = document.getElementById("checkbox1");
        let text = document.getElementById("text");
        if(checkbox1.checked){
            text.innerHTML = checkbox1.value;
        } else{
            text.innerHTML = "False";
        }
    }
</script>
</body>
</html>

checkbox1

次回はJavaScriptでここまで勉強してきたボタンや入力欄、ドロップダウンメニューなどをjQueryで設置、値の取得を行ってみたいと思います。