정상적으로 체크 박스를 사용합니다.

Question

저는 현재 체크 박스에 체크가 있는지 확인하는 자바 스크립트가 있습니다. 이 자바 스크립트 코드는 다소 끔찍하게 쓰여졌으며 코드의 여러 위치에서 여러 번 검사를하여 확인란이 선택되었는지 확인합니다. 성능을 향상시키고 코드를 DRY 상태로 유지하기 위해 한 번만 점검되는 확인란 옵션에 대해 마스터 재정의를 설정하는 적절한 방법이 있는지 묻습니다. 내가 가장 좋은 방법 질문 등이 더 궁금 그래서 기본적으로 지금은 확인해야하는 모든 장소를 내가 자바 스크립트와

if($("#element").attr("checked")){ 
    do something... 
} else { 
    do something else... 
} 

에 멍청한 놈의 비트를하고있어 이동합니다.

Answer 1

한 가지 방법은 현재 페이지에서 선택한 모든 체크 박스를 가져 와서 반복하는 것입니다.

var checkedBoxes = document.querySelectorAll("input:checked"); 

for (var i =0; i<checkedBoxes.length; i++) 
{ 
    //do something 
} 

FF 3.1에 대한이 유일한 작품, 사파리 3.1, IE8 + 및 크롬 4+

또한 querySelectoAll가 NodeList를 (안 배열) 반환합니다.

Answer 2

특정 확인란이 선택되어 있는지 확인하려면 다음
바이올린을 : http://jsfiddle.net/TesUq/

당신이 선택하는 체크 박스를 확인하려면

if($("#element").is(":checked")){ 
    console.log('#element is checked'); 
} else { 
    console.log('#element is not checked'); 
} 

---

:
바이올린 : http://jsfiddle.net/TesUq/1/

$("input:checkbox").each(function() { 
    if ($(this).is(":checked")) { 
     console.log($(this).prop('id') + ' is checked'); 
    } else { 
     console.log($(this).prop('id') + ' is not checked'); 
    } 
}); 

Answer 3

모든 체크 박스가 선택되어 있는지 확인하려는 경우 :

특정 체크 박스 처리를 위해 6,

if ($('input:checkbox:checked').length > 0) { 
    /* do whatever you need to do */ 
} 

: 당신은 지출이 jQuery를이 선택하고 시간을 줄이기 위해 상태를 직접 추적 할 수 있습니다

var chkBox = $('input:checkbox'); 
$.each(chkBox, function(i, v) { 
    if ($(this).is(':checked')) { 
     /* do whatever for this specific element using $(this) *\ 
    }; 
}); 

Answer 4

...이 HTML로

<div> 
    <label for="box1">Box 1</label> 
    <input type="checkbox" id="box1" name="BoxOne" /> 
    <span>Checked:</span> 
    <span id='box1state'>?</span> 
</div> 

및 이 자바 스크립트

$('document').ready(function() { 

    var box1state = $('#box1state'); 

    $('#box1').change(function (e) { 
     box1state.text(this.checked); 
    }); 

    box1state.text($('#box1')[0].checked); 
}); 

는

<span> 항상 체크 박스의 현재 상태를 포함합니다 (바이올린 http://jsfiddle.net/stephen61/uQv5y/1/ 참조). 이 기술을 대신 사용하여 .change(...) 기능 내의 do something... 또는 do something else...의 확인란 상태를 테스트 할 수 있습니다. 체크 박스 상태가 변경 될 때마다 만 변경되면 코드가 실행되어 원하는 것을 수행합니다.