jQuery를 사용하여 선택한 확인란의 값을 가져옵니다.

Question 1

확인란 그룹 'locationthemes'를 반복하고 선택한 모든 값으로 문자열을 만들고 싶습니다. 따라서 확인란 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/ 여기에서 확인 했지만 이름으로 확인란 그룹을 선택하는 방법에 대한 예는 없습니다.

어떻게 할 수 있습니까?

Question 2

jQuery에서 다음과 같은 속성 선택기를 사용하십시오.

$('input[name="locationthemes"]:checked');

이름이 "locationthemes"인 선택된 모든 입력을 선택하려면

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

데모

에서 VanillaJS

[].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));

데모

Question 3

$('input:checkbox[name=locationthemes]:checked').each(function() 
{
   // add $(this).val() to your array
});

작동 데모

또는

jQuery의 is()기능 사용 :

$('input:checkbox[name=locationthemes]').each(function() 
{    
    if($(this).is(':checked'))
      alert($(this).val());
});

Question 4

배열 매핑이 가장 빠르고 깨끗합니다.

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

다음과 같은 배열로 값을 반환합니다.

array => [2,3]

성과 헛간이 확인되고 나머지는 확인되지 않았다고 가정합니다.

Question 5

$("#locationthemes").prop("checked")

Question 6

jquery의 map기능 사용

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.push($(this).val());
});

Question 7

You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();

Question 8

따라서 모두 한 줄로 :

var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");

.. 선택자에 대한 참고 사항 [id*="checkbox"], "checkbox"문자열이있는 모든 항목을 가져옵니다. 여기서는 약간 어색하지만 .NET CheckBoxList와 같은 항목에서 선택한 값을 가져 오려는 경우 정말 좋습니다. 이 경우 "checkbox"는 CheckBoxList 컨트롤에 지정한 이름입니다.

Question 9

출처-자세한 정보

jQuery를 사용하여 선택한 확인란 값 가져 오기

그런 다음 jQuery each ()를 사용하여 배열에서 선택한 확인란 값을 가져 오는 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>

Question 10

var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
     SlectedList.push($(this).val());
});

Question 11

var voyageId = new Array(); 
$("input[name='voyageId[]']:checked:enabled").each(function () {
   voyageId.push($(this).val());
});

Question 12

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">

스 니펫 확장

Question 13

좀 더 현대적인 방법 :

const selectedValues = $('input[name="locationthemes"]:checked').map( function () { 
        return $(this).val(); 
    })
    .get()
    .join(', ');

먼저 주어진 이름으로 선택된 모든 확인란을 찾은 다음 jQuery의 map ()이 각각을 반복하고 콜백을 호출하여 값을 가져오고 결과를 이제 확인란 값을 보유하는 새 jQuery 컬렉션으로 반환합니다. 그런 다음 get ()을 호출하여 값 배열을 가져온 다음 join ()을 호출하여 단일 문자열로 연결합니다. 그런 다음 상수 selectedValues에 할당됩니다.