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

【问题标题】：Can't click on label to select checkbox with Bootstrap checkbox layout无法单击标签以选择具有 Bootstrap 复选框布局的复选框
【发布时间】：2017-10-29 05:05:24
【问题描述】：

所以我有以下代码：

// 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 fiddle，它显示了问题。

为帮助干杯。

【问题讨论】：

标签“for”和复选框“id”必须相同。 working example

标签： javascript jquery wordpress twitter-bootstrap checkbox

【解决方案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>

【讨论】：

哈哈不敢相信我错过了。感谢您的帮助^_^

【解决方案2】：

实际上，您根本不需要标签上的for 属性，浏览器可以让您单击并选中复选框。如果您将 <label> 标签包裹在输入周围，那么浏览器就会知道它是“用于”该字段的。

然而，您还应该包含for 属性，因为并非所有辅助技术都能识别标签和输入之间的关系。如前所述，您的代码的最大问题是您说标签是“用于”它所包裹的输入以外的东西。

这是一个更新的工作小提琴https://jsfiddle.net/BrettEast/ffgL77qo/，使用正确的 for 属性。

【讨论】：

如果你想要兼容可访问性，应该使用它
@charlietfl 非常真实！两者都应该完成，我会更新我的答案。

【解决方案3】：

标签属性for 和复选框id 必须相同。

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

【讨论】：

【解决方案4】：

label 标记中的属性for 应与字段的id 属性值相同。结帐this reference。在您的代码示例中，它显然是两个不同的值。

否则，您可以省略for 属性并将输入字段保留在其中：

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

jsbin 演示。

【讨论】：

【解决方案5】：

检查此代码。您应该在标签中使用for，在复选框中使用id。我希望你已经得到了答案。

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

【讨论】：