Select/Checkbox Labels

Get labels for checkbox or selected option

by Peter Nosko

HTML

<form>
    <dl>
        <dd><label><input type="checkbox" id="cb1" class="cb" name="checkbox1">item1</label></dd>
        <dd>       <input type="checkbox" id="cb2" class="cb" name="checkbox2">item2</dd>
        <dd>       <input type="checkbox" id="cb3" class="cb" name="checkbox3"><label for="cb3">item3</label></dd>
    </dl>
    <hr>
    <dl>
        <dd><select id="sl1" name="sl1">
              <option value="0"></option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
            <input type="hidden" id="label" value="">
        </dd>
    </dl>
</form>

JavaScript

$(".cb").click(function () {
    $cbx = $(this);
    $lbl = $(this).parent();
    alert($cbx.attr('id') + ' = ' + $lbl.text());
    $cbx.prop('checked', false);
});
$("#sl1").change(function () {
    $("#label").val($(this).find('option:selected').text());
    alert($("#label").val());
});