Por que existem tantas músicas sobre programação?

Ok, talvez não haja realmente nenhuma música sobre programação, mas existem muitas maneiras de abordar até mesmo os problemas mais simples quando você está programando. Este artigo discute apenas um: Verificar o estado de uma caixa de seleção HTML usando JavaScript.

Comecei a pensar sobre isso outro dia enquanto estava trabalhando em uma aplicação Rails que tinha algumas preferências para um modelo de usuário. Como havia apenas duas opções, e ambas eram valores booleanos, decidi usar AJAX para atualizar as preferências imediatamente após o usuário marcar uma das caixas. Dessa forma, não há necessidade de atualizar a página ou algo parecido.

O problema que encontrei foi usar JavaScript para verificar o estado da caixa de seleção. Quer dizer, não é algo complicado de se fazer. Mas existem tantas maneiras de fazer isso, quando você realmente começa a pensar sobre isso.

Por exemplo, usando jQuery, você pode verificar o valor do atributo “verificado”, assim:

$("#the_checkbox").attr("checked") === 'checked'

No entanto, em HTML, não importa qual valor está no atributo marcado, desde que tenha conteúdo. Então, realmente, verificar se o valor está ‘verificado’ nem sempre funciona. Quer dizer, deveria. Mas, como programador, não gosto de deixar as coisas ao acaso. Portanto, este seria um exemplo mais infalível:

typeof($("#the_checkbox").attr("checked")) !== 'undefined'

Mas espere! E se a caixa de seleção tiver um atributo marcado, mas estiver vazio, como este?

<input type="checkbox" checked>

Pessoalmente, não tenho ideia. Mas eu sei que no Chrome e no Firefox, esses navegadores pelo menos vêem isso como uma entrada marcada, e se você usar jQuery para verificar o valor do atributo “verificado”, ele diz que é igual a “verificado”, mesmo que esteja em fato vazio. Mas não sei como as quase centenas de variações de outros navegadores e versões (aqui estou olhando para você, IE!) Por aí veriam isso.

Ok, então esta postagem vai durar para sempre se eu listar todas as maneiras individuais de verificar o estado de uma caixa de seleção em JS e entrar em cada uma individualmente. Então, aqui está uma lista de apenas algumas maneiras que eu poderia pensar para fazer isso:

// First, find the checkbox using jQuery:
var checkbox = $("#the_checkbox");

// and then see if it's checked:

checkbox[0].checked

checkbox.prop("checked")

checkbox.attr("checked") === "checked"

typeof checkbox.attr("checked") !== "undefined"

checkbox.attr("checked")

checkbox.is(":checked")

$("#the_checkbox:checked").length

$("#the_checkbox:checked").length > 0

!!$("#the_checkbox:checked").length

// or, by accessing the DOM directly:
var checkbox = document.getElementById("the_checkbox"),
    checked  = checkbox.checked;

Portanto, a questão é, e eu já vi isso muito ser perguntado, qual é a melhor maneira de verificar o estado de uma caixa de seleção em JS? Existe realmente uma “melhor” maneira de fazer isso?

Diz-me tu.