1.800.323.3639 | Support | Training

Avtex

Clickable labels that highlight when selected

| No Comments

I’ve been designing a touch-friendly form for one of our clients. One thing we wanted to do was make checkboxes and radio buttons easier to tap, and clearly show what has been selected. A little bit of CSS and JavaScript did the trick. Check out the demo to see it in action.

This example uses Bootstrap classes, so you can drop these snippets straight into your own Bootstrap-based site and it should work just fine.

HTML

    <form id="testForm" class="form-horizontal" method="post">
    <div class="form-group">
      <div class="col-md-4">
        <label class="radio" for="option-0">
          <input name="options" id="option-0" value="1" type="radio">
          Option #1
        </label>
        <label class="radio" for="option-1">
          <input name="options" id="option-1" value="2" type="radio">
          Option #2
        </label>
        <label class="radio" for="option-2">
          <input name="options" id="option-2" value="3" type="radio">
          Option #3
        </label>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-4">
        <label class="checkbox" for="cb-option-0">
          <input name="checkboxes" id="cb-option-0" value="1" type="checkbox">
          Option #1
        </label>
        <label class="checkbox" for="cb-option-1">
          <input name="checkboxes" id="cb-option-1" value="2" type="checkbox">
          Option #2
        </label>
        <label class="checkbox" for="cb-option-2">
          <input name="checkboxes" id="cb-option-2" value="3" type="checkbox">
          Option #3
        </label>
      </div>
    </div>
    </form>

Pretty straightforward. Just standard Bootstrap form-groups, with the radios and checkboxes wrapped in label tags with appropriate “checkbox” and “radio” classes.

CSS

label.radio-inline,
label.checkbox-inline,
label.radio,
label.checkbox {
    margin-right:2%;
    cursor:pointer;
    font-weight:400;
    padding:10px 10px 10px 30px;
    background-color:#dcdfd4;
    margin-bottom:10px!important
}
label.radio-inline.checked,
label.checkbox-inline.checked,
label.radio.checked,
label.checkbox.checked {
    background-color:#266c8e;
    color:#fff!important;
    text-shadow:#000 1px 1px 2px!important
}

Again, fairly straightforward: We give all the labels a gray background and some padding. If we add the class “checked”, we use a blue background with white text.

JAVASCRIPT

//When checkboxes/radios checked/unchecked, toggle background color
$('.form-group').on('click','input[type=radio]',function() {
    $(this).closest('.form-group').find('.radio-inline, .radio').removeClass('checked');
    $(this).closest('.radio-inline, .radio').addClass('checked');
});
$('.form-group').on('click','input[type=checkbox]',function() {
    $(this).closest('.checkbox-inline, .checkbox').toggleClass('checked');
});

The Javascript ties it all together.

When a radio button is clicked, it finds the parent form-group and then from there looks for any radio buttons. It removes any existing “checked” classes from the radio buttons, then adds the “checked” class to the label for the radio button that was just clicked.

When a checkbox is clicked, the code is simpler: it just finds the label for that checkbox and toggles the “checked” class on it.

Let’s Talk About CX

X