확인란은 사용자가 선택 및 선택 취소를 통해 이진 선택(참 또는 거짓)을 할 수 있는 선택 상자입니다. 기본적으로 체크박스는 사용자로부터 하나 이상의 입력을 얻기 위해 GUI 형식과 애플리케이션에서 자주 사용되는 아이콘입니다.
- 확인란을 표시하거나 선택하면 다음을 나타냅니다. 진실 ; 이는 사용자가 값을 선택했음을 의미합니다.
- 확인란이 선택 해제되었거나 선택되어 있지 않으면 다음으로 표시됩니다. 거짓 ; 이는 사용자가 값을 선택하지 않았음을 의미합니다.
기억 확인란은 한 번에 여러 항목을 선택할 수 있다는 점에서 라디오 버튼 및 드롭다운 목록과 다릅니다. 대조적으로, 라디오 버튼과 드롭다운을 사용하면 주어진 옵션 중에서 하나만 선택할 수 있습니다.
이 장에서는 이제 다음을 사용하여 표시된 모든 체크박스 값을 얻는 방법을 살펴보겠습니다. 자바스크립트 .
체크박스 구문 생성
확인란을 만들려면 HTML 탭을 사용하고 아래와 같이 탭 내부에 ='checkbox'를 입력하세요.
Yes
JavaScript를 통해 체크박스 개체를 생성하여 체크박스를 생성할 수도 있지만 이 방법은 약간 복잡합니다. 나중에 두 가지 접근 방식에 대해 논의하겠습니다.
알리사 만요녹
예
체크박스 값 생성 및 가져오기
이 예에서는 두 개의 체크박스를 생성하지만 사용자는 체크박스 사이에 단 하나의 체크박스만 표시해야 한다는 조건을 적용합니다. 그런 다음 표시된 확인란의 값을 가져옵니다. 아래 코드를 참조하세요.
코드 복사
<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 양식에 정의된 원하는 옵션을 하나 이상 선택할 수 있음을 의미합니다. 모든 확인란을 선택할 수도 있습니다. 위의 예에서 당신은 이미 그것을 보았습니다.
적대적 검색