Checkbox list of values selection and removal

- 1 answer

Ad

I have a list with checkbox values. My aim is to allow users to click on the whole coloured box for each value (i.e. the checkbox will mark when they click either the checkbox, the name, and the whole coloured box). I kinda achieved that but somehow the checkbox box shows up in the middle when hover over.

Here my BOOTPLY - BOOTPLY

$("#clear").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
<div class="btn-toolbar">
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-default" type="button">Brand</button>
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
                <input class="typeahead" placeholder="Search values" type="text">
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Alpha</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Beta
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Gamma</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Delta</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Omega</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Koppa
                    </label>
                </div>
				<div class="div_form">
							<span class="btn_apply" id="apply">Apply</span>
                  <span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
					</div>
            </div>
        </div><!--Primary buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Colour</button>
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
				<input class="typeahead" placeholder="Search values" type="text">
               <div class="checkbox">
                    <label><input value="" type="checkbox"> Eins</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Zwei
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Drei</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Vier</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Fünf</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Sechs
                    </label>
                </div>
				<div class="div_form">
							<span class="btn_apply" id="apply">Apply</span>
							<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
					</div>
            </div>
        </div><!--Info buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-info" type="button">Merchant</button>
            <button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
				<input class="typeahead" placeholder="Search values" type="text">
                <div class="checkbox">
                    <label><input value="" type="checkbox"> First value</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Second option
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Third choice</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Fourth alternative</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Fifth decision</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Sixt focus
                    </label>
                </div>
				<div class="div_form">
							<span class="btn_apply" id="apply">Apply</span>
							<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
					</div>
            </div>
        </div><!--Success buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-danger" type="button">Price</button>
            <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
				<input class="typeahead" placeholder="Search values" type="text">
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-1</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-2
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-3</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-4</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Value-5</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-6
                    </label>
                </div>
				<div class="div_form">
							<span class="btn_apply" id="apply">Apply</span>
							<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
					</div>
            </div>
        </div>
        </div><!--Success buttons with dropdown menu-->   

Ad

Answer

Ad

Do this for a correct hover:

  1. Remove the with: 100% from .checkbox :hover:

    .checkbox :hover {
        background-color: red;
        cursor: pointer;
        /* width: 100%; */
     }
    

Note

Also keep in mind you should post different questions, when you really ahve different questions in SOF. Thus the question and its answers would be more usefull to the community.

Also here is not a place, people do thing for you. You should show some effort and let people help YOU solve it.

UPDATE 1

and add it to the label:

.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
    width: 100%;
}
Ad
source: stackoverflow.com
Ad