jQuery를 사용하여 선택한 확인란의 값을 가져옵니다.
확인란 그룹 '위치 테마'를 반복하여 선택한 모든 값으로 문자열을 작성합니다.따라서 2번 및 4번 확인란을 선택하면 결과는 "3,8"
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
여기서 확인했습니다: http://api.jquery.com/checked-selector/ . 하지만 이름으로 확인란 그룹을 선택하는 예는 없습니다.
어떻게 해야 하나요?
jQuery에서는 다음과 같은 속성 선택기를 사용합니다.
$('input[name="locationthemes"]:checked');
선택한 모든 입력을 "위치 테마"라는 이름으로 선택합니다.
console.log($('input[name="locationthemes"]:checked').serialize());
//or
$('input[name="locationthemes"]:checked').each(function() {
console.log(this.value);
});
바닐라 JS에서
[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
console.log(cb.value);
});
ES6/스프레드 연산자
[...document.querySelectorAll('input[name="locationthemes"]:checked')]
.forEach((cb) => console.log(cb.value));
$('input:checkbox[name=locationthemes]:checked').each(function()
{
// add $(this).val() to your array
});
작업 데모
OR
jQuery의 기능 사용:
$('input:checkbox[name=locationthemes]').each(function()
{
if($(this).is(':checked'))
alert($(this).val());
});
배열을 매핑하는 것이 가장 빠르고 깨끗합니다.
var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })
값을 다음과 같은 배열로 반환합니다.
array => [2,3]
성곽과 헛간은 확인되었고 다른 것들은 확인되지 않았다고 가정합니다.
$("#locationthemes").prop("checked")
jquery's 사용map기능.
var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
checkboxValues.push($(this).val());
});
좀 더 현대적인 방법:
const selectedValues = $('input[name="locationthemes"]:checked').map( function () {
return $(this).val();
})
.get()
.join(', ');
먼저 지정된 이름을 가진 모든 선택된 확인란을 찾은 다음 jQuery의 맵()이 각 확인란을 반복하여 호출하여 값을 가져오고 결과를 새 jQuery 컬렉션으로 반환합니다. 이 컬렉션으로 결과를 반환합니다.그런 다음 get()을 호출하여 값 배열을 가져온 다음 join()을 하나의 문자열로 연결합니다. 이 문자열은 상수로 선택된 값에 할당됩니다.
var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
SlectedList.push($(this).val());
});
You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();
모두 한 줄로:
var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");
..선택기에 대한 메모[id*="checkbox"]문자열 "filename"이 들어 있는 모든 항목을 가져옵니다.여기서는 약간 서툴지만, a와 같은 것에서 선택한 값을 끌어내려고 한다면 정말 좋습니다.NET 확인란 목록.이 경우 "확인란"은 CheckBoxList 컨트롤에 지정한 이름이 됩니다.
jQuery를 사용하여 선택한 확인란 값 가져오기
그런 다음 각 jQuery()를 사용하여 배열에서 선택한 확인란 값을 얻기 위해 jQuery 스크립트를 작성합니다.이 jQuery 함수를 사용하여 루프를 실행하여 확인된 값을 가져와 배열에 넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Selected Checkboxes Value Using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn").click(function() {
var locationthemes = [];
$.each($("input[name='locationthemes']:checked"), function() {
locationthemes.push($(this).val());
});
alert("My location themes colors are: " + locationthemes.join(", "));
});
});
</script>
</head>
<body>
<form method="POST">
<h3>Select your location themes:</h3>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br>
<button type="button" class="btn">Get Values</button>
</form>
</body>
</html>
Jquery 3.3.1, 모든 확인란에 대한 값 가져오기 버튼 클릭
$(document).ready(function(){
$(".btn-submit").click(function(){
$('.cbCheck:checkbox:checked').each(function(){
alert($(this).val())
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="vehicle1" name="vehicle1" class="cbCheck" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" class="cbCheck" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" class="cbCheck" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit" class="btn-submit">var voyageId = new Array();
$("input[name='voyageId[]']:checked:enabled").each(function () {
voyageId.push($(this).val());
});
언급URL : https://stackoverflow.com/questions/11292778/use-jquery-to-get-values-of-selected-checkboxes
'programing' 카테고리의 다른 글
| 파워셸에 디렉터리를 재귀적으로 나열 (0) | 2023.08.13 |
|---|---|
| 스크롤바가 있는 경우에도 div를 항상 페이지 내용의 맨 아래에 유지 (0) | 2023.08.13 |
| 도커: 이미 만든 컨테이너에 다시 시작 정책 추가 (0) | 2023.08.13 |
| MariaDB Java Client 1.5.7이 JDBC 4.2와 호환됩니까? (0) | 2023.08.13 |
| 텍스트 보기 - 텍스트 크기를 프로그래밍 방식으로 설정하면 작동하지 않는 것 같습니다. (0) | 2023.08.13 |