Changement de case à cocher jQuery et événement de clic


564

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

Ici, .change()la valeur de la zone de texte est mise à jour avec l'état de la case à cocher. J'utilise .click()pour confirmer l'action sur décocher. Si l'utilisateur sélectionne Annuler, la coche est restaurée mais se .change()déclenche avant confirmation.

Cela laisse les choses dans un état incohérent et la zone de texte indique false lorsque la case est cochée.

Comment puis-je gérer l'annulation et garder la valeur de la zone de texte cohérente avec l'état de vérification?


1
Il fonctionne dans FF et chrome et a le comportement expliqué dans IE 8. Il peut donc être important de noter dans quels navigateurs vous avez besoin de cela pour fonctionner et dans lesquels vous voyez l'erreur.
kasdega

Ce n'est pas le meilleur, mais je pense que cela fonctionne pour moi ici: http://jsfiddle.net/Skooljester/2Xxcn/ .
ayyp

Réponses:


904

Testé dans JSFiddle et fait ce que vous demandez.Cette approche a l'avantage supplémentaire de se déclencher lorsque vous cliquez sur une étiquette associée à une case à cocher.

Réponse mise à jour:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

Réponse originale:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

128
Juste une note, il est beaucoup plus rapide à utiliser this.checkedau lieu de $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5
Dakota

37
@Dakota Certes, c'est beaucoup plus lent, mais nous parlons toujours de 600k opérations / sec. Donc, 600 fois par milliseconde. Je pense que si cela commence à causer des problèmes de performances sur votre page Web, vous devrez peut-être réévaluer votre javascript;) Il est cependant bon de comprendre les mesures de performances avec du code. Merci.
Mike U

51
@MikeU: D'accord avec vous sur l'optimisation prématurée, mais étant donné que this.checkedc'est beaucoup plus court pour écrire + javascript natif, cela pourrait vraiment valoir la peine d'être utilisé en général (en plus d'être ~ 200 à 300 fois plus rapide).
Lévite

11
Je recommanderais .prop () au lieu de .attr () car ce dernier ne fonctionne pas dans tous les cas et je pense que jQuery recommande maintenant .prop ().
kabadisha

2
Je pense que [ceci] dans $ ('# textbox1'). Val (this.checked); fait référence au document. Il doit s'agir de $ ('# textbox1'). Val ($ ('# checkbox1'). Is (': checked'));
yurin

90

Démo

Utilisation mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

Il affiche l'alerte lors de la vérification et il m'empêche toujours de vérifier en fait. C'est sur Chrome.
pimvdb

Identique à @pimvdm. La confirmation apparaît même pour l'action de vérification (elle ne devrait apparaître que pour la décocher) et la sélection de ok n'entraîne pas la vérification de la case.
Professor Chaos

1
Cela fonctionne lorsque vous utilisez la souris, mais pas si vous la vérifiez avec le clavier.
frinux

3
@frinux C'est tout simplement parce que c'est une question liée à la souris. Veuillez ne pas voter contre les réponses en fonction de leur pertinence pour des questions entièrement distinctes. Si vous rencontrez un problème lors du déclenchement de l'état d'un indicateur après une vérification de la case à cocher via le clavier, veuillez poster une question à ce sujet au lieu de diminuer les réponses avec négligence.
Joseph Marikle

3
Downvoted puisque mousedown n'est pas le seul moyen pour un utilisateur d'interagir avec la case à cocher.
Jonathan

51

La plupart des réponses ne l'attraperont pas (probablement) si vous utilisez <label for="cbId">cb name</label>. Cela signifie que lorsque vous cliquez sur l'étiquette, elle coche la case au lieu de cliquer directement sur la case à cocher. (Pas exactement la question, mais divers résultats de recherche ont tendance à venir ici)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

Dans ce cas, vous pouvez utiliser:

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Exemple JSFiddle avec jQuery 1.6.4

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Exemple JSFiddle avec la dernière jQuery 2.x

  • Ajout d'exemples jsfiddle et du html avec l'étiquette de case à cocher cliquable

1
C'est #OuterDivOrBody pas .OuterDivOrBody :)
Laurent Brieu

24

Eh bien .. juste pour sauver un mal de tête (il est minuit passé ici), je pourrais trouver:

$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
  }
});

J'espère que cela aide


11

Pour moi, cela fonctionne très bien:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

4
Je suis tombé sur cela via une recherche sur le Web. Vous devez utiliser 'prop' au lieu de 'attr' >> api.jquery.com/prop
Dr Schizo

11

Vous voilà

Html

<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

Javascript

<script>
    $(document).ready(function () {

      $('input[id^="ProductId_"]').click(function () {

        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        }
        else {
           // do what you need here         
           alert("Unchecked");
        }
      });

  });
</script>

6

Débarrassez-vous de l'événement de modification et modifiez à la place la valeur de la zone de texte dans l'événement de clic. Plutôt que de renvoyer le résultat de la confirmation, attrapez-le dans une var. Si c'est vrai, changez la valeur. Retournez ensuite la var.


6

Cliquez sur la case à cocher et vérifiez la valeur dans la même boucle d'événements.

Essaye ça:

$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
        }
    }, 0);
});

Démo: http://jsfiddle.net/mrchief/JsUWv/6/


6

si vous utilisez l'iCheck Jquery, utilisez le code ci-dessous

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });

5

Essaye ça

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

5
$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            if(!confirm("Are you sure?"))
            {
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
            }
        }
    });
});

4
// this works on all browsers.

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
    });
});

4
$('#checkbox1').click(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }
    $('#textbox1').val($(this).is(':checked')); 
});


<div id="check">
    <input type="checkbox" id="checkbox1" />
    <input type="text" id="textbox1" />
</div>

4

Réponse tardive, mais vous pouvez également utiliser on("change")

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" > <span>Check me!</span>


1

il suffit simplement d'utiliser l'événement de clic, mon ID de case à cocher est CheckAll

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    }

1

obtenir la valeur radio par son nom

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });

1

Je ne sais pas pourquoi tout le monde rend cela si compliqué. C'est tout ce que j'ai fait.

if(!$(this).is(":checked")){ console.log("on"); }

-1
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })

3
Les réponses de code uniquement sont considérées comme de faible qualité: assurez-vous de fournir une explication sur ce que fait votre code et comment il résout le problème. Cela aidera le demandeur et les futurs lecteurs à la fois si vous pouvez ajouter plus d'informations dans votre message. Voir aussi Explication des réponses entièrement basées sur le code: meta.stackexchange.com/questions/114762/…
borchvm
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.