반응형
html checkbox value 값 가져오기
- checkbox value 값 가져오기
- javascript checkbox checked value 가져오기
- JavaScript checkbox checked
- JavaScript checkbox checked 변경
- JavaScript checkbox checked 여부
- JavaScript checkbox checked 제어
- jquery checkbox checked value
- jquery checkbox checked 값 가져오기
checkbox 값 가져오기 html
- 아래 코드는 두 가지 방식(순수 JavaScript와 jQuery을 사용하여 checkbox에서 선택된 값을 읽고 결과를 표시하는 예시입니다.
<html>
<head>
<title>checkbox 값 가져오기</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function btncheckbox() {
let checkedValues = [];
document.querySelectorAll('input[type="checkbox"]').forEach(function (checkbox) {
if (checkbox.checked) {
checkedValues.push(checkbox.nextElementSibling.innerText);
}
});
document.getElementById("result").innerText = '선택한 요일: ' + checkedValues.join(', ');
}
function btncheckboxJquery() {
let checkedValues = [];
$('input[type="checkbox"]:checked').each(function () {
checkedValues.push($(this).next('label').text());
});
$('#result').text('선택한 요일: ' + checkedValues.join(', '));
}
function btncheckboxone() {
alert(document.getElementById('chk0').checked);
}
function btncheckboxJqueryone() {
alert($('#chk0').is(':checked'));
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="chk0" name="chk0" /><label for="chk0">일</label>
<input type="checkbox" id="chk1" name="chk1" /><label for="chk1">월</label>
<input type="checkbox" id="chk2" name="chk2" /><label for="chk2">화</label>
<input type="checkbox" id="chk3" name="chk3" /><label for="chk3">수</label>
<input type="checkbox" id="chk4" name="chk4" /><label for="chk4">목</label>
<input type="checkbox" id="chk5" name="chk5" /><label for="chk5">금</label>
<input type="checkbox" id="chk6" name="chk6" /><label for="chk6">토</label>
<br />
<button onclick="btncheckboxone(); return false;">javascript checkbox 값 가져오기(하나만)</button>
<button onclick="btncheckboxJqueryone(); return false;">jquery checkbox 값 가져오기(하나만)</button>
<br />
<button onclick="btncheckbox(); return false;">javascript checkbox 값 가져오기</button>
<button onclick="btncheckboxJquery(); return false;">jquery checkbox 값 가져오기</button>
<br />
<p id="result"></p>
</form>
</body>
</html>- JavaScript: querySelectorAll을 사용하여 체크박스들을 모두 선택한 후, 각 체크박스가 체크되었는지 여부를 확인하고, 체크된 값들을 배열에 저장합니다.
- jQuery: $('input [type="checkbox"]:checked')를 사용하여 체크된 체크박스들만 선택하고, 체크된 체크박스의 label 값을 가져와 배열에 저장합니다.
반응형
'dev > jquery' 카테고리의 다른 글
| checkbox 전체 체크 (0) | 2024.09.22 |
|---|---|
| html checkbox 값 설정 (0) | 2024.09.22 |
| html radio,checkbox label 클릭 (0) | 2024.09.17 |
| html radio 값 설정 (0) | 2024.09.17 |
| html radio value 값 가져오기 (1) | 2024.09.17 |