Исключительная обработка флажков

Question

У меня есть javascript, над которым я сейчас работаю, проверяет наличие флажка в поле. Этот код javascript более или менее ужасно написан, и мы проверяем несколько раз в нескольких местах кода, чтобы убедиться, что флажок установлен или нет. Я спрашиваю, есть ли изящный способ установить мастер-переопределение для флажков, которые проверяются только один раз, чтобы как повысить производительность, так и сохранить код DRY. В основном сейчас на каждом месте, что он нуждается в проверяемой я хожу в

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

я немного нуб с JavaScript поэтому мне было интересно об этом больше как передовой практике вопрос.

Answer 1

Один из способов - установить все флажки, которые отмечены на текущей странице, а затем пропустить их.

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

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

это работает только для FF 3.1+, Safari 3.1+, IE8 + и Chrome 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'); 
} 

---

Если вы хотите проверить, какие флажки выбраны:
Fiddle: 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

Если вы хотите проверить, установлен ли флажок ANY:

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

Для конкретной обработки CheckBox:

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

Answer 4

Вы можете отслеживать состояние самостоятельно, чтобы сократить время, потраченное на JQuery выбирает ...

С помощью этого HTML

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

и этот javascript

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

    var box1state = $('#box1state'); 

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

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

(см скрипку http://jsfiddle.net/stephen61/uQv5y/1/)

<span> всегда будет содержать текущее состояние флажка. Этот метод можно вместо этого использовать для проверки состояния флажка и do something... или do something else... в функции .change(...). Каждый раз при изменении состояния флажка и только, когда он изменяется, код запускается, чтобы делать то, что вы хотите.