So I have the following 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

Which outputs checkboxes and labels for the wordpress frontend. But when I click on the label for each checkbox the checkbox doesn't get selected.

Here is a js fiddle which shows the problem.

Cheers for the help.

So I have the following 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

Which outputs checkboxes and labels for the wordpress frontend. But when I click on the label for each checkbox the checkbox doesn't get selected.

Here is a js fiddle which shows the problem.

Cheers for the help.

• javascript
• jquery
• wordpress
• twitter-bootstrap
• checkbox

• Label "for" and checkbox "id" must be same. working example – imskm Commented May 29, 2017 at 0:26

5 Answers 5

you must include the id of your element 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>

You actually don't need the for attribute on your label at all, for the browser to let you click and select the checkbox . If you wrap your <label> tag around the input, then the browser knows that it is 'for' that field.

However, you should also include the for attribute, as not all assistive technologies recognise the relationship between label and input. As mentioned, the biggest issue with your code is that you are saying the label is 'for' something other than the input that it is wrapped around.

Here is an updated working fiddle https://jsfiddle.net/BrettEast/ffgL77qo/, using the correct for attribute.

Label attribute for and checkbox id must be same.

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

The attribute for in label tag should be the same value of the id attribute of the field. Checkout this reference. In your code sample it is obviously two diffirent values.

Otherwise, you may omit the for attribute and keeping the input field inside it:

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

jsbin demo.

Check this code. You should you for in the label and id for checkbox. I wish you already got the answer.

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