jQuery에서 확인란 값 가져 오기

jQuery에서 확인란의 값을 얻으려면 어떻게해야합니까?

Value 속성의 값을 얻으려면 다음과 같이 할 수 있습니다.

$("input[type='checkbox']").val();

또는 당신은을 설정 한 경우 class또는 id그것을 위해, 당신은 할 수 있습니다 :

$('#check_id').val();
$('.check_class').val();

그러나 이것은 확인 여부에 관계없이 동일한 값 을 반환합니다 . 제출 된 양식 동작과 다르기 때문에 혼동 될 수 있습니다.

확인 여부를 확인하려면 다음을 수행하십시오.

if ($('#check_id').is(":checked"))
{
  // it is checked
}

그 두 가지 방법이 효과가 있습니다.

• $('#checkbox').prop('checked')
• $('#checkbox').is(':checked')(감사합니다 @mgsloan)

$('#test').click(function() {
    alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
    alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />

이 작은 해결책을 시도하십시오 :

$("#some_id").attr("checked") ? 1 : 0;

또는

$("#some_id").attr("checked") || 0;

확인란 값을 검색하는 올바른 방법은 다음과 같습니다.

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) ) 

jQuery 웹 사이트의 공식 문서에 설명되어 있습니다. 나머지 메소드는 확인란 의 속성 과 관련이 없으며 속성 을 확인하고 있습니다. 즉, 확인란을로드 할 때 확인란의 초기 상태를 테스트하고 있음을 의미합니다. 간단히 말해 :

• 요소가 있고 그것이 확인란이라는 것을 알면 단순히 속성을 읽을 수 있으며 jQuery가 필요하지 않거나 jQuery를 elem.checked사용 $(elem).prop("checked")하려는 경우 사용할 수 있습니다 .
• 요소가 처음로드되었을 때의 값 (즉, 기본값)을 알고 (또는 비교해야하는 경우) 올바른 방법입니다 $(elem).is(":checked").

답이 오해의 소지가 있으므로 아래에서 직접 확인하십시오.

http://api.jquery.com/prop/

일을 명확히하기 위해 :

$('#checkbox_ID').is(":checked")

'true'또는 'false'를 반환합니다

$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();

jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.push($(this).val());
            });
        }
        alert(selectedCountry);
    });

간단하지만 효과적이며 확인란이 있음을 알고 있다고 가정합니다.

$("#some_id")[0].checked;

제공 true/false

//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey

데모 예

이 질문에 jQuery 솔루션이 필요하다는 사실에도 불구하고 아무도 언급하지 않았으므로 순수한 JavaScript 답변이 있습니다.

jQuery없이 :

요소를 선택하고 checked속성 (부울을 반환)에 액세스하면 됩니다 .

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);

<input type="checkbox"/>

다음은 change이벤트 를 듣는 간단한 예입니다 .

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});

<input type="checkbox"/>

확인 된 요소를 선택하려면 :checked의사 클래스 ( input[type="checkbox"]:checked)를 사용하십시오 .

다음은 확인 된 input요소 를 반복하고 확인 된 요소 이름의 매핑 된 배열을 반환 하는 예입니다 .

여기 예

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

<div class="parent">
    <input type="checkbox" name="name1" />
    <input type="checkbox" name="name2" />
    <input type="checkbox" name="name3" checked="checked" />
    <input type="checkbox" name="name4" checked="checked" />
    <input type="checkbox" name="name5" />
</div>

선택된 모든 확인란 의 값을 배열로 얻는 방법은 다음과 같습니다 .

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.push(this.value);
                });
                return a;
            })()

에 checked checkboxex의 값을 얻으려면 jquery:

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

에서 pure js:

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});

다음 코드를 사용하십시오.

$('input[name^=CheckBoxInput]').val();

$('.class[value=3]').prop('checked', true);

가장 좋은 방법은 $('input[name="line"]:checked').val()

또한 선택한 텍스트를 얻을 수 있습니다 $('input[name="line"]:checked').text()

단일 선택 단추 입력에 값 속성 및 이름을 추가하십시오. 모든 입력의 이름 속성이 동일한 지 확인하십시오.

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>

수년에 걸쳐 API가 변경되어 2018 년 현재 주목하십시오. removeAttr은 더 이상 사용되지 않으며 더 이상 작동하지 않습니다!

Jquery 체크 박스를 체크 또는 체크 해제 :

더 이상 작동하지 않습니다.

   $('#add_user_certificate_checkbox').removeAttr("checked");

   $('#add_user_certificate_checkbox').attr("checked","checked");

대신 다음을 수행해야합니다.

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);