チェックボックスは、ユーザーがチェックを入れたり外したりすることで二者択一 (true または false) を選択できる選択ボックスです。基本的に、チェックボックスはアイコンであり、ユーザーから 1 つ以上の入力を取得するために GUI フォームやアプリケーションで頻繁に使用されます。
- チェックボックスがマークまたはオンになっている場合は、次のことを示します。 真実 ;これは、ユーザーが値を選択したことを意味します。
- チェックボックスがオフまたはチェックされていない場合は、次のことを示します。 間違い ;これは、ユーザーが値を選択していないことを意味します。
覚えておいてください チェックボックスは、一度に複数の選択ができるため、ラジオ ボタンやドロップダウン リストとは異なります。対照的に、ラジオ ボタンとドロップダウンを使用すると、指定されたオプションから 1 つだけを選択できます。
この章では、次を使用して、マークされたチェックボックスの値をすべて取得する方法を見ていきます。 JavaScript 。
チェックボックスの作成構文
チェックボックスを作成するには、以下に示すように HTML タブを使用し、タブ内に type='checkbox' を使用します。
ニーナ・グプタ
Yes
JavaScriptでチェックボックスオブジェクトを作成してチェックボックスを作成することもできますが、この方法は少し複雑です。両方のアプローチについては後ほど説明します。
例
チェックボックスの値を作成して取得する
この例では、2 つのチェックボックスを作成しますが、ユーザーがその間のチェックボックスを 1 つだけマークする必要があるという条件が付いています。次に、マークされたチェックボックスの値を取得します。以下のコードを参照してください。
コードをコピーする
<h2>Create a checkbox and get its value</h2> <h3> Are you a web developer? </h3> Yes: No: <br> <br> Submit <br> <h4> <h4> function checkCheckbox() { var yes = document.getElementById('myCheck1'); var no = document.getElementById('myCheck2'); if (yes.checked == true && no.checked == true){ return document.getElementById('error').innerHTML = 'Please mark only one checkbox either Yes or No'; } else if (yes.checked == true){ var y = document.getElementById('myCheck1').value; return document.getElementById('result').innerHTML = y; } else if (no.checked == true){ var n = document.getElementById('myCheck2').value; return document.getElementById('result').innerHTML = n; } else { return document.getElementById('error').innerHTML = '*Please mark any of checkbox'; } } </h4></h4> 今すぐテストしてください 出力
マークを付けると、 はい チェックボックスをオンにし、 提出する ボタンを押すと、次のようなメッセージが表示されます。
配列リスト
をクリックすると、 提出する チェックボックスをオンにせずに ボタンをクリックすると、エラー メッセージが表示されます。
同様に、他の条件の出力を確認できます。
すべてのチェックボックスの値を取得する
次に、ユーザーがマークしたすべてのチェックボックスの値を取得する方法を説明します。以下の例を参照してください。
コードをコピーする
<h2>Create a checkbox and get its value</h2> <h4> Select the programming language, you know </h4> <tr> <td> Java: </td> <td> PHP: </td> </tr> <tr> <td> Angular: </td> <td> CSS: </td> </tr> <tr> <td> Python: </td> <td> Android: </td> Check all <br> <br> Submit <br> <h4></h4> function checkAll() { var inputs = document.querySelectorAll('.pl'); for (var i = 0; i <inputs.length; i++) { inputs[i].checked="true;" } function getcheckboxvalue() var l1="document.getElementById('check1');" l2="document.getElementById('check2');" l3="document.getElementById('check3');" l4="document.getElementById('check4');" l5="document.getElementById('check5');" l6="document.getElementById('check6');" res=" " ; if (l1.checked="=" true){ pl1="document.getElementById('check1').value;" + ','; else (l2.checked="=" pl2="document.getElementById('check2').value;" (l3.checked="=" document.write(res); pl3="document.getElementById('check3').value;" (l4.checked="=" pl4="document.getElementById('check4').value;" (l5.checked="=" pl5="document.getElementById('check5').value;" (l6.checked="=" pl6="document.getElementById('check6').value;" pl6; return document.getelementbyid('result').innerhtml="You have not selected anything" ' languages'; < pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>By executing this code, we will get a response like the below screenshot having some programming languages where you can choose the language you know.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-3.webp" alt="How to get all checked checkbox value in JavaScript"> <p>Here, you click on the <strong>Check all</strong> button, it will mark all the programming language checkboxes. After that, click on the <strong>Submit</strong> button to get the response.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-4.webp" alt="How to get all checked checkbox value in JavaScript"> <p>Although you can select the language one by one by marking an individual checkbox and then click on the <strong>Submit</strong> button to get the result.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-5.webp" alt="How to get all checked checkbox value in JavaScript"> <p> <strong>Output: When you have not selected anything</strong> </p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-6.webp" alt="How to get all checked checkbox value in JavaScript"> <h2>Get all marked checkboxes value using querySelectorAll() method</h2> <p>There is one more method to get all selected values from the checkboxes marked by the user. You will now see how to get the value of all checkboxes using the querySelectorAll() method marked by the user. This will fetch the checkboxes values from the HTML form and display the result.</p> <h3>Get all checkbox value</h3> <p>Now, you will see how to get all checkbox values marked by the user. See the below example.</p> <p> <strong>Copy Code</strong> </p> <pre> <h2> Get all marked checkboxes value </h2> <h4> Select the programming language, you know </h4> <tr> <td> Java: </td> <td> PHP: </td> </tr> <tr> <td> Angular: </td> <td> CSS: </td> </tr> <tr> <td> Python: </td> <td> Android: </td> <br> <br> Submit <br> <h4></h4> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } </tr></pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>Here, you can see that all marked checkboxes value has been returned.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-7.webp" alt="How to get all checked checkbox value in JavaScript"> <h3>Different JavaScript codes to get marked checkboxes value</h3> <p>JavaScript Code to get all checked checkbox values</p> <pre> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } </pre> <p>You can also use the below code to get all checked checkboxes values.</p> <pre> document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } </pre> <p>So, checkbox elements allow to multi-select. This means that the users can select one or more options of their choice defined in the HTML form. Even you can select all the checkboxes. In the above example, you have already seen that.</p> <hr></inputs.length;></tr> 今すぐテストしてください 出力
ここでは、マークされたすべてのチェックボックスの値が返されたことがわかります。
マークされたチェックボックスの値を取得するためのさまざまな JavaScript コード
チェックされたチェックボックスの値をすべて取得する JavaScript コード
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } 以下のコードを使用して、チェックされたすべてのチェックボックスの値を取得することもできます。
ピート・デビッドソンの国籍
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } したがって、チェックボックス要素では複数選択が可能です。これは、ユーザーが HTML フォームで定義された 1 つ以上のオプションを選択できることを意味します。すべてのチェックボックスを選択することもできます。上の例では、それがすでにわかりました。