Kann nicht auf Label klicken, um Kontrollkästchen mit Bootstrap-Kontrollkästchen-Layout auszuwählen

Also ich habe folgenden Code:

// the loop
                $countId = 0;
                $dateOnce="";
                foreach ($postDates as $post):
                    if (substr($post->post_date, 0, 7) != $dateOnce) {
                        echo'
                            <div class="checkbox">
                                <label for="filterByPostDate-' . $countId . '">
                                    <input type="checkbox" id="filterByPostDate-' . substr($post->post_date, 0, 7) . '" class="postDateFilters postDateFilterCb-' . $countId . '" name="filterByPostDate-' . $countId . '" value="' . substr($post->post_date, 0, 7) . '" '; if (isset($_SESSION["filterByPostDate"])) { $key = array_search(substr($post->post_date, 0, 7), $_SESSION["filterByPostDate"]); } else { $key = false; } if($key !== false) { echo 'checked'; } echo ' />
                                    ' . date('M, Y', strtotime($post->date_part)) . '
                                </label>
                            </div>
                        ';
                    }
                    $dateOnce = substr($post->post_date, 0, 7);
                $countId++;
                endforeach;
                // END the loop

Welche Checkboxen und Labels für das WordPress-Frontend ausgibt. Aber wenn ich auf das Label für jedes Kontrollkästchen klicke, wird das Kontrollkästchen nicht ausgewählt.

Hier ist ein js Geige was das Problem zeigt.

Prost für die Hilfe.

Sie müssen die enthalten id Ihres Elements in
<label for="">

<div class="checkbox">
  <label for="filterByPostDate-2011-12">
    <input type="checkbox" id="filterByPostDate-2011-12" class="postDateFilters postDateFilterCb-0" name="filterByPostDate-0" value="2011-12"  />
    Dec, 2011
  </label>
</div>

<div class="checkbox">
  <label for="filterByPostDate-2012-01">
    <input type="checkbox" id="filterByPostDate-2012-01" class="postDateFilters postDateFilterCb-6" name="filterByPostDate-6" value="2012-01"  />
    Jan, 2012
  </label>
</div>

Die braucht man eigentlich nicht for Attribut auf Ihrem Etikett, damit Sie im Browser auf das Kontrollkästchen klicken und es auswählen können . Wenn Sie Ihre wickeln <label> Tag um die Eingabe, dann weiß der Browser, dass es für dieses Feld ist.

Jedochsollten Sie auch die enthalten for Attribut, da nicht alle Hilfstechnologien die Beziehung zwischen Bezeichnung und Eingabe erkennen. Wie bereits erwähnt, ist das größte Problem mit Ihrem Code, dass Sie sagen, dass das Label für etwas anderes als die Eingabe ist, um die es gewickelt ist.

Hier ist eine aktualisierte Arbeitsgeige https://jsfiddle.net/BrettEast/ffgL77qo/indem Sie das richtige for-Attribut verwenden.

Label-Attribut for und Kontrollkästchen id muss gleich sein.

<label for="checkbox1">I have a bike</label>
<input id="checkbox1" type="checkbox" name="vehicle1" value="Bike">


<label for="checkbox2">I have a car</label>
<input id="checkbox2" type="checkbox" name="vehicle1" value="Car">

Das Attribut for in label tag sollte den gleichen Wert haben wie der id Attribut des Feldes. Kasse diese Referenz. In Ihrem Codebeispiel handelt es sich offensichtlich um zwei verschiedene Werte.

Andernfalls können Sie die weglassen for -Attribut und Behalten des Eingabefelds darin:

<label>Check this
  <input type="checkbox" name="any" value="1">
</label>

jsbin Demo.

Überprüfen Sie diesen Code. Sie sollten Sie for im Etikett u id für Kontrollkästchen. Ich wünschte, du hättest die Antwort schon bekommen.

<div class="checkbox">
   <label for="filterByPostDate-2017-05">
   <input type="checkbox" id="filterByPostDate-2017-05" class="postDateFilters postDateFilterCb-01" name="filterByPostDate-01" value="2017-05"/>May, 2017
	 </label>
</div>
							
<div class="checkbox">
		<label for="filterByPostDate-2017-06">
			<input type="checkbox" id="filterByPostDate-2017-06" class="postDateFilters postDateFilterCb-02" name="filterByPostDate-2" value="2017-06" />June, 2017
		</label>
</div>