jQuery에서 확인란 값 가져오기

jQuery에서 확인란 값 가져오기

jQuery에서 확인란 값을 가져오려면 어떻게 해야 합니까?

선택 여부를 확인하려면 다음을 수행합니다.

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

Value 특성의 값을 얻으려면 다음과 같은 작업을 수행합니다.

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

또는설경우한정▁a우경을 .class또는id다음을 수행할 수 있습니다.

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

그러나 선택 여부와 상관없이 동일한 값을 반환합니다. 제출된 양식 동작과 다르기 때문에 혼동을 일으킬 수 있습니다.

이 두 가지 방법은 다음과 같습니다.

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

$('#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 웹사이트의 공식 문서에 설명된 바와 같이.나머지 메소드는 확인란의 속성과 관련이 없으며, 속성을 확인하고 있으며, 이는 확인란이 로드되었을 때 확인란의 초기 상태를 테스트하고 있음을 의미합니다.간단히 말해서:

• 이라는 것을 만 하면 ( 요있확이라는것란알을속면성읽을하기가않다만면니습필지하요고인소가ququ▁when▁andi다않니▁and▁j습'▁that▁you▁need▁itst▁checkbox▁element지▁you가▁won하요▁j▁(▁you▁for▁propertyery▁a▁read▁you▁it▁theery▁simply▁is▁can).)elem.checked) 또는 를 사용할 수 있습니다.$(elem).prop("checked")j에 ,Query에 의존하고 싶은 경우.
• 로드되었을 을 알아야 해야 할 은 요가처로즉때을값의을었드되다알 (소, 기값본같)아할야니방다습경음입니다.elem.getAttribute("checked")또는elem.prop("defaultChecked").

로 참로입니다.elem.attr("checked")+ 되어 jQuery 버전 1.6.1+와 합니다.elem.prop("checked").

일부 답변은 오해의 소지가 있거나 부정확합니다. 아래 내용을 확인하십시오.

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

명확하게 하기 위해서입니다.

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

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

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

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

$("#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(".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);
    });

이 질문이 jQuery 솔루션을 요구하고 있음에도 불구하고, 아무도 언급하지 않았기 때문에 여기 순수한 자바스크립트 답변이 있습니다.

jQuery 사용 안 함:

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

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

---

선택한 요소를 선택하려면 유사 클래스(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>

$("input[name='gender']:checked").val();

이것은 제 경우에 효과가 있었습니다, 간단한 방법을 찾는 사람은 이 구문을 시도해야 합니다.감사해요.

다음을 사용할 수 있습니다.정상적으로 작동하는 것으로 테스트되었습니다.

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

한다면checkbox이 항목을 선택하면 반환됩니다.true그리고 역도 성립.

아래 코드 조각은 JavaScript에서 동일한 작업을 수행하려는 모든 사용자를 위한 것입니다.

document.getElementById("checkbox_id").checked //JavaScript

돌아가다true한다면checkbox선택됨

모든 확인란의 값을 배열로 가져오는 방법은 다음과 같습니다.

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

다음 코드를 사용합니다.

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

선택한 확인란 ex의 값을 가져옵니다.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
});

$('.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>

확인란이 하나 이상일 경우 항상 아래 예에서 표시된 것처럼 명명된 배열을 사용합니다. 국가를 여러 개 선택할 수 있기 때문에 name="filename[]"을 사용했습니다. 확인란을 선택하는 동안 아래 예제와 같이 이름으로 참조해야 합니다.

var selectedCountries = ["Pakistan", "USA"];

$(document).ready(function () {
  $.each(selectedCountries, function (index, country) {
    $(`input[name='countries[]'][value='${country}']`).attr('checked', 'checked');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
  <input type="checkbox" name="countries[]" value="Pakistan">
  Pakistan
</p>
<p>
  <input type="checkbox" name="countries[]" value="India">
  India
</p>
<p>
  <input type="checkbox" name="countries[]" value="USA">
  USA
</p>

하위 항목을 하나만 선택해야 하는 경우:

form.querySelector(":checked").value

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

2018년 현재, 수년간의 API 변화로 인해 주목해 주십시오.removeAttrat은 더 이상 작동하지 않습니다!

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);

언급URL : https://stackoverflow.com/questions/2834350/get-checkbox-value-in-jquery