webentwicklung-frage-antwort-db.com.de

aktivieren/Deaktivieren der Bootstrap-Kontrollkästchen mit jQuery

Ich habe gestern noch eine post gemacht und war damit nicht erfolgreich. Ich werde jetzt versuchen, die Idee neu zu ordnen und erneut zu fragen, da ich keine Lösung dafür finden kann (ich bin ein Neuling und bemühe mich sehr).

Die Sache ist, dass ich mit dieser Vorlage arbeite, die auf Bootstrap basiert, und dies ist der Code, den ich direkt aus einer der Dateien sehen kann und den ich für mein Projekt verwende:

html-schnipsel:

<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 langem Suchen habe ich bei der Untersuchung festgestellt, dass mein Code so aussieht (Schnipsel):

<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, werden ein weiteres Div und eine weitere Spanne hinzugefügt (wissen Sie nicht wirklich, warum oder wie). Ich schätze, jetzt ist es ein DOM-Problem, das ich habe.

Dies ist ein Ausschnitt meiner js-Datei:

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

Diese Funktion wählt also ALLE Kontrollkästchen aus, die ich habe (auch wenn diejenigen, die ich nicht möchte, weil sie zu einer anderen Kategorie gehören).

Ich möchte wissen, warum Div und Span hinzugefügt werden und wie nur die Kontrollkästchen ausgewählt werden, die ich möchte.

Dafür habe ich Code so ausprobiert, 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 andere, die ich gelöscht habe.

HINWEIS: Bei der Prüfung werden keine js-Fehler angezeigt

8
Limon

Da ich erwähnte, dass diese Funktion alle Kontrollkästchen, die ich hatte, markiert hat (auch wenn diejenigen, die nicht geprüft werden sollten), habe ich versucht, nach der Lösung zu suchen:

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

Aber das wollte ich nicht. Ich erwähnte auch, dass mir aufgefallen ist, dass der Code bei der Überprüfung "anders" war (in Chrome mit F12). Wie @thecbuilder sagte, ändert sich dies, um Stil hinzuzufügen.

Mir wurde klar, dass sich der Code ändert ... Ich musste die Klasse (Kontrollkästchen) ändern, von der aus ich die Suche nach "span tag" startete. Daher ändere ich das Kontrollkästchen der Klasse in die ID-Zustände. Dies ist das Ergebnis:

$('#allstates').click(function() {
  if($(this).attr("checked")){
    $('#states').find('span').addClass('checked');        
  }else{
    $('#states').find('span').removeClass('checked');
  }    
});

Nun geht es endlich.

6
Limon

Es ist auch wichtig, bei der Auswahl von Ankreuzfeldern eine Prop zu true hinzuzufügen:

$("#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);
   }
});
9
Mufaddal Saifee

Ich denke, Sie suchen nach 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 sich der Status des Kontrollkästchens mit der ID allstates ändert, rufen Sie den Kontrollkästchenwert ab, suchen Sie das erste übergeordnete HTML-Element mit der Klasse controls und aktualisieren Sie dann nur alle Kontrollkästchen in diesem Element mit dem Wert von checked.

2
Erik Philips

Einfache Bootstrap-Checkbox

<label><input type="checkbox" value="">Option 1</label>

Wenn Sie in Chrome Dev Tool debuggen, sieht das Label folgendermaßen aus https://tinker.press/images/bootstrap-checkbox-label-2017-01-17_084755.png

Um den Checkbox-Status von Google zu setzen, setzen Sie einfach true|false auf lable.control.checked.

label.control.checked = false; //uncheck
label.control.checked = true; //check

Video-Demo https://youtu.be/3qEMFd9bcd8

0
Anh Le Hoang