title: Checkbox styling - targeting a specific input element
body: <p>Within a series of check boxes (lets say 3 options) I am looking to target a specific input element on the checking/unchecking of the associated label.</p>
  
  <p><strong>HAML</strong></p>
  
  <pre><code>.choice-select-button
    = check_box_tag("order[recipes][]", recipe.id, selected)
    = label_tag do
      = t(".step_4.tick_box_to_select")
  </code></pre>
  
  <p><strong>Renders HTML</strong></p>
  
  <pre><code>&lt;div class="choice-select-button"&gt;
    &lt;input type="checkbox" name="order[recipes][]" id="order_recipes_" value="6" checked="checked"&gt;
    &lt;label&gt;Click to select&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each <code>&lt;input&gt;</code> is assigned same id, namely <code>id="order_recipes_"</code> so if I give set <code>&lt;label for="order_recipes_"&gt;</code> and the user then 'un-checks' the label then only the first input on the page with the <code>id="order_recipes_"</code> is styled according to my css instructions.</p>
  
  <p>The only differentiator I can see for the <code>choice-select-button.input</code> is it's value. As such I was looking at giving the label a <code>for=</code> that targets <code>inputs</code> with the <code>id="order_recipes_</code> AND <code>value="6"</code>. First up, is this doable, and secondly, is the best way to do something like this or is there a much more simple method?</p>
  
  <p>Thanks in advance.</p>