Clique alternar com jQuery
Pergunta
Eu usei uma função de foco onde você faz x em mouseover e y e mouseout. Estou tentando o mesmo por clique, mas isso não parece trabalho:
$('.offer').click(function(){
$(this).find(':checkbox').attr('checked', true );
},function(){
$(this).find(':checkbox').attr('checked', false );
});
Eu quero que a caixa de seleção para ser verificado ao clicar em um div
e desmarcada se clicado novamente - uma alternância clique
Solução
Isso é facilmente feito por lançando a corrente 'checada' estado da caixa de verificação a cada clique. Exemplos:
$(".offer").on("click", function () {
var $checkbox = $(this).find(':checkbox');
$checkbox.attr('checked', !$checkbox.attr('checked'));
});
ou
$(".offer").on("click", function () {
var $checkbox = $(this).find(':checkbox');
$checkbox.attr('checked', !$checkbox.is(':checked'));
});
ou, por manipular diretamente o DOM 'checada' propriedade (ou seja, não usando attr()
a buscar o estado atual da caixa de seleção clicada):
$(".offer").on("click", function () {
var $checkbox = $(this).find(':checkbox');
$checkbox.attr('checked', !$checkbox[0].checked);
});
... e assim por diante.
Nota: desde jQuery 1.6, caixas de seleção deve ser definido usando prop
não attr
:
$(".offer").on("click", function () {
var $checkbox = $(this).find(':checkbox');
$checkbox.prop('checked', !$checkbox[0].checked);
});
Outras dicas
Outra abordagem seria jquery prolongado como este:
$.fn.toggleCheckbox = function() {
this.attr('checked', !this.attr('checked'));
}
Em seguida, chamar:
$('.offer').find(':checkbox').toggleCheckbox();
Aviso: usando attr () ou prop () para alterar o estado de uma caixa de seleção não fogo a evento de alteração na maioria dos navegadores eu testei com. O estado selecionado vai mudar, mas nenhum evento borbulhando. Você deve acionar o evento de alteração manualmente depois de definir o atributo marcada. Eu tive alguns outros manipuladores de eventos de monitorização do estado de caixas de seleção e que iria trabalhar bem com cliques de usuários diretos. No entanto, definir o estado verificado de forma programática não consegue desencadear consistentemente o evento de alteração.
jQuery 1.6
$('.offer').bind('click', function(){
var $checkbox = $(this).find(':checkbox');
$checkbox[0].checked = !$checkbox[0].checked;
$checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});
Você pode usar o href="http://docs.jquery.com/Events/toggle" rel="noreferrer"> toggle
função :
$('.offer').toggle(function() {
$(this).find(':checkbox').attr('checked', true);
}, function() {
$(this).find(':checkbox').attr('checked', false);
});
Por que não em uma linha?
$('.offer').click(function(){
$(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});
Eu tenho uma única caixa de seleção nomeado chkDueDate
e um objeto HTML com um evento de clique a seguinte:
$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));
Ao clicar no objeto HTML (neste caso, um <span>
) alterna a propriedade verificada do caixa.
jQuery: Best Way, delegar as ações para jQuery (jQuery = jQuery)
.$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
return !val;
});
Tente alterar isto:
$(this).find(':checkbox').attr('checked', true );
a esta:
$(this).find(':checkbox').attr('checked', 'checked');
Não 100% de certeza se isso vai fazê-lo, mas eu me lembro de ter um problema semelhante. Boa sorte!
$('.offer').click(function(){
if ($(this).find(':checkbox').is(':checked'))
{
$(this).find(':checkbox').attr('checked', false);
}else{
$(this).find(':checkbox').attr('checked', true);
}
});
Em JQuery Eu não acho que click () aceita duas funções para alternar. Você deve usar a função de alternância () para isso: http://docs.jquery.com/Events/toggle
$('.offer').click(function() {
$(':checkbox', this).each(function() {
this.checked = !this.checked;
});
});
A solução mais fácil
$('.offer').click(function(){
var cc = $(this).attr('checked') == undefined ? false : true;
$(this).find(':checkbox').attr('checked',cc);
});
<label>
<input
type="checkbox"
onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
/>
Check all
</label>
Outra solução alternativa para valor opção de alternância:
<div id="parent">
<img src="" class="avatar" />
<input type="checkbox" name="" />
</div>
$("img.avatar").click(function(){
var op = !$(this).parent().find(':checkbox').attr('checked');
$(this).parent().find(':checkbox').attr('checked', op);
});
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});