aktivieren/deaktivieren Sie die bootstrap-Checkboxen mit jQuery

Habe ich aus einem anderen post gestern und hatte keine Erfolg damit. Ich werde jetzt versuchen, neu zu ordnen de Idee und nochmal Fragen, da ich nicht finden können, die Lösung für dieses (ich bin ein Neuling und ich versuche wirklich hart).

Die Sache ist, ich arbeite mit dieser Vorlage basierend auf Bootstrap, und dies ist der code, dass ich das sehen kann direkt aus den Dateien und, dass ich Sie mit auf mein Projekt:

html-snippet:

<div class="hide" id="states">
  <div class="control-group">                           
    <label class="control-label">Seleccione</label>
      <div class="controls">
        <label class="checkbox span4">
          <input type="checkbox" value="all" id="allstates" name="all"/>Todas
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
        </label>
      </div>
    </div>
  </div>

Nach viel suchen habe ich gegründet, wenn Sie Prüfung es, dass mein code sieht so aus (snippet):

<div class="controls">
  <label class="checkbox span4">
    <div class="checker" id="uniform-allstates">
      <span>
        <input type="checkbox" value="all" id="allstates" name="all">
      </span>
    </div>Todas
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Caba" id="" name="st[]">                          
       </span>
    </div> Ciudad Autónoma de Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]">                           
      </span>
    </div> Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Catamarca" id="" name="st[]">                             
      </span>
    </div> Catamarca
  </label>
</div>

Wie Sie sehen können, ein weiteres div-Element und einen anderen Bereich Hinzugefügt werden (ernst, weiß nicht wie oder warum), so dass ich vermute, jetzt ist es einige DOM-problem, den ich habe.

Dies ist Ausschnitt aus meinem js-Datei:

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

So dass diese Funktion markiert ALLE Kontrollkästchen, die ich habe (obwohl diejenigen, die ich nicht wollen, denn Sie gehören zu einer anderen Kategorie).

Möchte ich wissen, warum das div und span sind Hinzugefügt und wie zu aktivieren Sie nur die Kontrollkästchen, die ich will.

Für die, die ich habe versucht, der code, aber kein Erfolg:

test 1

$('#allstates').click(function() {
  if ($(this).is(':checked')) {
    $('span input').attr('checked', true);
  } else {
    $('span input').attr('checked', false);
  }
});

test2

$('#allstates').click(function() {
  $(".states").prop("checked",$("#allstates").prop("checked"))
});

und so anderen, die ich gelöscht.

HINWEIS: Keine js-Fehler angezeigt werden, wenn die Kontrolle

$('#checkboxId').prop('checked'); aus stackoverflow.com/a/28604443/1225421

InformationsquelleAutor Limon | 2014-08-05

Außerdem ist es wichtig hinzufügen prop auf true Auswahl Checkboxen:

$("#checkAll").click(function(){
   var check = $(this).prop('checked');
   if(check == true) {
     $('.checker').find('span').addClass('checked');
     $('.checkbox').prop('checked', true);
   } else {
     $('.checker').find('span').removeClass('checked');
     $('.checkbox').prop('checked', false);
   }
});

Manuell Umgang mit der checkbox aktivierten Zustand auf klicken Sie hat mir geholfen, die Arbeit rund um ein komisches Problem auf meinem iOS (12.1+) web-app, mit dem browser das rendering der invertierte Zustand der checkbox ?

InformationsquelleAutor Mufaddal Saifee

6

Da ich erwähnt, dass diese Funktion aktiviert alle Checkboxen, die ich hatte (obwohl Sie das nicht sollen überprüft werden), ich habe versucht, zu suchen für die Lösung:
```
$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});
```
Aber das ist nicht das, was ich wollte. Ich erwähnte auch, dass ich bemerkte, dass der code war "anders", wenn die Kontrolle (in Chrome mit F12). So wie @thecbuilder gesagt, es ändert sich, um Stil hinzufügen.

Merkte ich, dass da der code verändert... ich hatte zum ändern der Klasse (checkbox), von dem aus ich starten wollte, die "span-tag" - Suche, so wechsele ich die Klasse checkbox id-Staaten und das ist das Ergebnis:
```
$('#allstates').click(function() {
  if($(this).attr("checked")){
    $('#states').find('span').addClass('checked');        
  }else{
    $('#states').find('span').removeClass('checked');
  }    
});
```
Nun ist es endlich funktioniert.
- bitte überprüfen Sie stackoverflow.com/questions/32266101/...
InformationsquelleAutor Limon
2

Ich denke, Sie sind auf der Suche für einen code wie:
```
$(document).ready(function()
{
    $("#allstates").on("change", function()
    {
        var checked = $(this).prop("checked");

        $(this).parents(".controls")
            .first()
            .find("input[type=checkbox]")
            .prop("checked", checked);
    });
});
```
JsFiddle-Beispiel

Wenn der Zustand der checkbox mit der id allstates Veränderungen, erhalten Sie die checkbox, Wert, finden die ersten Eltern-html-element mit einer Klasse namens controls und dann nur aktualisieren Sie alle Kontrollkästchen in diesem element mit dem Wert geprüft.
- Hi, danke für die Antwort. Ich weiß, es funktioniert auf der fiddle, aber es funktioniert nicht auf meinen code..
- Ich aktualisiert die Geige mit Ihren genauen html und es scheint zu funktionieren. Was funktioniert nicht daran?
- Ja ich weiß, Baue ich code von mir, der arbeitete auf der fiddle, aber nicht in meinem code. Ich weiß nicht, was kann möglich sein..das der js code, den ich gepostet funktioniert aber wählt alle Kontrollkästchen, obwohl die, die ich nicht will
- vielen Dank für die Sorge. Ich jetzt es funktioniert, aber funktioniert nicht in meinem Fall. Ich kam auf die Lösung, obwohl
- bitte überprüfen Sie stackoverflow.com/questions/32266101/...
InformationsquelleAutor Erik Philips
0

Einfache bootstrap-checkbox
```
<label><input type="checkbox" value="">Option 1</label>
```
Beim Debuggen in Chrome dev tool, label Aussehen
https://tinker.press/images/bootstrap-checkbox-label-2017-01-17_084755.png

Zu Toggle-checkbox-Zustand nur eingestellt true|false auf lable.control.checked
```
label.control.checked = false; //uncheck
label.control.checked = true; //check
```
Demo-Video https://youtu.be/3qEMFd9bcd8
- leider funktioniert das nicht, wenn Sie die checkbox und radio buttons: getbootstrap.com/docs/4.0/components/buttons/...
InformationsquelleAutor Anh Le Hoang

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.