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

欢呼帮助。

Answer 1

标签＆＃34;用于＆＃34;和复选框＆＃34; id＆＃34;必须是一样的。

Answer 2

您根本不需要标签上的for属性，浏览器允许您点击并选中该复选框。如果您将<label>标记包裹在输入中，那么浏览器就知道它是＆＃39;对于＆＃39;那个领域。

但是，您还应该包含for属性，因为并非所有辅助技术都能识别标签和输入之间的关系。如上所述，您的代码最大的问题是您说标签是＆＃39; for＆＃39;除了输入的东西以外的东西。

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

Answer 3

您必须包含元素的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>

Answer 4

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

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

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

jsbin演示。

Answer 5

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

＆＃13;

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

＆＃13;

无法点击标签以选中带有Bootstrap复选框布局

5 个答案: