web-dev-qa-db-fra.com

jQuery case à cocher changer et cliquez sur l'événement

$(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() met à jour la valeur de la zone de texte avec le statut de la case à cocher. J'utilise .click() pour confirmer l'action en décochant. Si l'utilisateur sélectionne Annuler, la coche est restaurée, mais .change() se déclenche avant confirmation.

Cela laisse les choses dans un état incohérent et la zone de texte dit faux lorsque la case à cocher est cochée.

Comment puis-je gérer l'annulation et garder la valeur de la zone de texte cohérente avec l'état du contrôle?

javascriptjqueryevent-handling
515
Professor Chaos

Testé dans JSFiddle et fait ce que vous demandez. Cette approche présente l’avantage supplémentaire de se déclencher lorsqu’un libellé associé à une case à cocher est cliqué.

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'));        
    });
});
828
kasdega

démo

Utilisez mousedown

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

La plupart des réponses ne la comprendront pas (probablement) si vous utilisez <label for="cbId">cb name</label>. Cela signifie que lorsque vous cliquez sur l'étiquette, la case est cochée 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 de 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 version de jQuery 2.x

  • Ajout des exemples jsfiddle et du code HTML avec l’étiquette de case à cocher cliquable
46
lko

Eh bien… pour ne pas avoir mal à la tête (il est minuit passé ici), je pourrais vous proposer:

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

J'espère que ça aide

24
zarun

Pour moi cela fonctionne très bien:

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

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>
10
Developer

Supprimez l'événement change et changez plutôt la valeur de la zone de texte dans l'événement click. Plutôt que de renvoyer le résultat de la confirmation, attrapez-le dans un var. Si c'est vrai, changez la valeur. Puis retournez le var.

6
yoozer8

Cliquez sur la case à cocher et recherchez la valeur dans la même boucle d'événements est le problème.

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
Mrchief

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

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

Essaye ça

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });
5
ShankarSangoli
$(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'));
            }
        }
    });
});
5
Jason
$('#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
user3636759
// 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
Marcelo De Zen

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
CharlotteOswald

il suffit simplement d'utiliser click event mon identifiant de case à cocher est CheckAll

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

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

             alert(";)");
      }
    }
1
Geeti

obtenir une valeur radio par name

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

Réponse tardive, mais vous pouvez aussi 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
Pedro Lobito