si la case est cochée, cela

Quand je coche une case, je veux tourner <p> #0099ff.

Quand j'ai décocher la case, je le veux pour annuler cela.

Code que j'ai pour l'instant:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
})

"... quand elle est désactivée, pour désactiver la même fonction." - la fonction transmise à .click() est invoqué sur l'événement click. Donc je ne comprends pas ce que tu veux dire par "activer" et "désactiver". Si la case est cochée, vous pouvez appeler la fonction a(). Mais vous devez écrire l'inverse de la fonction à appeler lorsque la case n'est pas cochée. Je suis confus.
Vous pouvez, bien sûr, .bind() et .unbind() les événements à un autre élément basé sur la case à cocher état. Est-ce que vous êtes après?
Désolé pour le spam mais je l'ai fait un exemple de quoi je parle.
Je sais que c'est un vieux post, mais maintenant, jQuery utilise prop() pour que cette question a voulu utiliser attr(); la prop() méthode n'avait pas été créé à l'époque. Les réponses sur les this.checked sont probablement encore utile, cependant.

InformationsquelleAutor android.nick | 2010-11-22

234

Je utilisation .change() et this.checked:
```
$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});
```
--

Sur l'utilisation de this.checked

Andy E a fait un excellent article sur la façon dont nous avons tendance à abuser de jQuery: en Utilisant la puissance impressionnante de jQuery pour accéder aux propriétés d'un élément. L'article traite spécifiquement de l'utilisation de .attr("id") mais dans le cas que #checkbox est un <input type="checkbox" /> élément de la question est la même pour $(...).attr('checked') (ou même $(...).is(':checked')) vs this.checked.

InformationsquelleAutor jensgram
47

De l'essayer.
```
$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 
```
Parfois, nous overkill jquery. Beaucoup de choses peuvent être obtenus à l'aide de jquery avec du javascript.

InformationsquelleAutor Chinmayee G
33

Il peut arriver que des "ce.checked" est toujours "on". Je vous recommande donc de:
```
$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});
```
- Dans mon cas, j'ai juste changé de $(':checkbox') afin de le faire fonctionner 😉
InformationsquelleAutor Benny Neugebauer
21

c'est mieux si vous définissez une classe avec une couleur différente, puis vous passez la classe
```
$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 
```
de cette façon, votre code c'est plus propre parce que vous n'avez pas à spécifier toutes les propriétés css (disons que vous voulez ajouter une bordure, un style de texte ou autres...), mais vous venez de passer une classe
- +1 pour la solution générique. Il n'y a pas de raison de ne $('#checkbox').attr('checked'), cependant, si nous savons que #checkbox est une case à cocher (si pas, l'ID est plutôt trompeur). this.checked fera.
- Merci pour l'astuce! Je n'avais jamais vu toggleClass avec interrupteur. Je suis à la suppression de mon post que c'est inutile. Désolé d'être aussi pointilleux, mais je pense que cette réponse serait parfait à 100%, sans '#case " être sélectionnée deux fois: peut-être utiliser $(ce) à la place? Ou jensgram la solution?
- bien sûr, vous pouvez mettre en cache votre élément avant de l'utiliser (voir le code maintenant). c'.vérifié, c'est même plus rapide que $(..).attr('checked')
InformationsquelleAutor
4

J'ai découvert un fou solution pour régler ce problème de case à cocher non vérifié ou vérifié
voici mon algorithme...
créer une variable globale permet de dire var check_holder

check_holder a 3 états
1. état indéfini
2. 0
3. 1 état
Si la case est coché,
```
$(document).on("click","#check",function(){
    if(typeof(check_holder)=="undefined"){
          //this means that it is the first time and the check is going to be checked
          //do something
          check_holder=1; //indicates that the is checked,it is in checked state
    }
    else if(check_holder==1){
          //do something when the check is going to be unchecked
          check_holder=0; //it means that it is not checked,it is in unchecked state
    }
     else if(check_holder==0){
            //do something when the check is going to be checked
            check_holder=1;//indicates that it is in a checked state
     }
});
```
Le code ci-dessus peut être utilisé dans beaucoup de situation pour savoir si une case a été cochée ou non cochée. Le concept derrière cela est de sauver la case unis dans une variable, c'est à dire quand il est sur "off".
j'Espère que la logique peut être utilisée pour résoudre votre problème.
- La solution est en effet de fou mais pas dans le bon sens. Oui les variables globales peuvent vous aider à résoudre un problème aujourd'hui, mais ils seront presque certainement devenir un problème pour vous demain. Essayez de les éviter, si possible, qui est 99 % du temps. Ils font qu'il est impossible de raisonner sur votre code, sans se soucier de l'état global. Une variable globale peut paraître innocent, mais elle deviendra rapidement des dizaines puis des centaines. Été là, vu que la et c'est pas joli.
InformationsquelleAutor zedecliff

Vérifier ce code:

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>

InformationsquelleAutor Prabhjit Singh

$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});

InformationsquelleAutor Klaster_1

Probablement, vous pouvez aller avec ce code, à prendre des mesures comme la case est cochée ou décochée.

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});

InformationsquelleAutor Sanjiv Malviya

Je ferais :

$('#checkbox').on("change", function (e){ 

    if(this.checked){

      //Do one thing 

    }

    else{

     //Do some other thing

    }

});

Voir : https://www.w3schools.com/jsref/prop_checkbox_checked.asp

InformationsquelleAutor Jon Ryan

Mise en œuvre optimale

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

Démo

JS:

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

HTML:

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.
</p>

InformationsquelleAutor John Slegers

Pourquoi ne pas utiliser le construit en événements?

$('#checkbox').click(function(e){
    if(e.target.checked) {
     //code to run if checked
        console.log('Checked');

     } else {

     //code to run if unchecked
        console.log('Unchecked');
     }
});

InformationsquelleAutor Paul 501

Vous devez vous connecter pour publier un commentaire.