JavaScript : 전체 선택된 체크 박스의 값을 배열로 얻는 샘플
소개
체크 박스의 전 선택·전 해제와, 버튼을 눌렀을 때에 체크되고 있는 체크 박스의 값을 배열로 취득하는 UI 샘플을 만듭니다. (마지막 샘플도 있습니다)
전체 선택·전 해제에서는 다음과 같이 동작하도록 합니다.
HTML
html
<!-- 全選択 -->
<label><input type="checkbox" id="check_all" name="check_all">すべて</label>
<!-- 選択肢 -->
<div id="items">
<label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label>
<label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label>
<label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label>
<label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label>
<label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label>
</div>
<!-- ボタン -->
<input type="button" value="チェックボックスの値を配列で取得" id="get_values">
input 요소를 label 요소로 묶어두면, 체크 박스와 텍스트 부분의 어느쪽을 클릭해도, 체크가 들어가기 때문에 편리함이 좋아집니다.체크 박스의 전 선택·해제
1. 「선택지」의 체크 상태를 전환한다
자바스크립트
$('#check_all').on('change', function() {
// 「選択肢」のチェック状態を切替える
$('.item').prop('checked', $(this).is(':checked'));
});
처리는 간단하고, 「전체 선택」과 「각 선택지」의 상태를 동일하게 하고 있을 뿐입니다.
$(this).is(':checked') 에서 "전체 선택"의 체크 상태를 취득하고 있습니다.덧붙여 이 부분은
$(this).prop('checked')라든지 this.checked 에서도 OK입니다.2. 「전 선택」의 체크 상태를 전환한다
자바스크립트
$('.item').on('change', function() {
// 「全選択」のチェック状態を切替える
if ($('#items :checked').length == $('#items :input').length){
$('#check_all').prop('checked', true);
}else{
$('#check_all').prop('checked', false);
}
});
각 선택 사항을 확인할 때 선택 항목의 확인란 수와 확인 상태 수를 비교합니다.
.prop('checked', true) .prop('checked', false) 체크한 값을 배열로 취득
.each() 사용
자바스크립트
$('#get_values').on('click', function() {
var vals = []; // 配列を定義
$('input[name="fruits"]:checked').each(function() {
vals.push( $(this).val() ); // 配列に値を追加
});
console.log(vals);
});
체크된 input 요소를
.each() 대상으로 하기 때문에,input[name="name属性名"]:checked 와 같이 셀렉터에 :checked 를 붙입니다.체크된 값을 포함하는 배열
vals 를 정의해 두고, .push() 로 추가합시다.실행 결과(버튼 클릭)
// 「りんご」と「オレンジ」のみチェック
["apple", "orange"]
버튼을 누르면 체크된 값을 배열로 얻을 수 있습니다.
.map() 사용
자바스크립트
$('#get_values').on('click', function(){
var vals = $('input[name="fruits"]:checked').map(function() {
return $(this).val();
}).get();
console.log(vals);
});
.map() 를 사용해도 실행 결과는 .each()와 같습니다.완성(샘플)
마지막으로 완성형의 전체 코드를 실어 둡니다. (.map()판)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>全選択したチェックボックスの値を配列で取得するサンプル</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
// チェックボックスの全選択・解除
$('#check_all').on('change', function() {
// 「選択肢」のチェック状態を切替える
$('.item').prop('checked', $(this).is(':checked'));
});
$('.item').on('change', function() {
// 「全選択」のチェック状態を切替える
if ($('#items :checked').length == $('#items :input').length){
$('#check_all').prop('checked', true);
}else{
$('#check_all').prop('checked', false);
}
});
// チェックした値を配列で取得
$('#get_values').on('click', function(){
var vals = $('input[name="fruits"]:checked').map(function() {
return $(this).val();
}).get();
console.log(vals);
});
});
</script>
</head>
<body>
<!-- 全選択 -->
<label><input type="checkbox" id="check_all" name="check_all">すべて</label>
<!-- 選択肢 -->
<div id="items">
<label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label>
<label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label>
<label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label>
<label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label>
<label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label>
</div>
<!-- ボタン -->
<input type="button" value="チェックボックスの値を配列で取得" id="get_values">
</body>
</html>
Reference
이 문제에 관하여(JavaScript : 전체 선택된 체크 박스의 값을 배열로 얻는 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/saka212/items/f17396127a19c58a87c6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>全選択したチェックボックスの値を配列で取得するサンプル</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
// チェックボックスの全選択・解除
$('#check_all').on('change', function() {
// 「選択肢」のチェック状態を切替える
$('.item').prop('checked', $(this).is(':checked'));
});
$('.item').on('change', function() {
// 「全選択」のチェック状態を切替える
if ($('#items :checked').length == $('#items :input').length){
$('#check_all').prop('checked', true);
}else{
$('#check_all').prop('checked', false);
}
});
// チェックした値を配列で取得
$('#get_values').on('click', function(){
var vals = $('input[name="fruits"]:checked').map(function() {
return $(this).val();
}).get();
console.log(vals);
});
});
</script>
</head>
<body>
<!-- 全選択 -->
<label><input type="checkbox" id="check_all" name="check_all">すべて</label>
<!-- 選択肢 -->
<div id="items">
<label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label>
<label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label>
<label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label>
<label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label>
<label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label>
</div>
<!-- ボタン -->
<input type="button" value="チェックボックスの値を配列で取得" id="get_values">
</body>
</html>
Reference
이 문제에 관하여(JavaScript : 전체 선택된 체크 박스의 값을 배열로 얻는 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/saka212/items/f17396127a19c58a87c6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
