无法单击标签以选择带有 Bootstrap 复选框布局的复选框

Question

所以我有以下代码：

// 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

它为 wordpress 前端输出复选框和标签。但是当我点击每个复选框的标签时，复选框没有被选中。

这是一个显示问题的js小提琴。

为帮助干杯。

Answer 1

你必须在id你的元素中包含 <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>