vendredi 21 août 2015

Custom checkbox auto uncheck all other items when checked a item

I have a list of custom checkbox. But when I check a item in that list. All other items will be uncheck(if checked). I've checked with Visual Event in that page but can not found any event attached to that checkboxes.

Code here:

    /*Css for checkbox*/
.checkbox {
    margin: 13px 4px 13px 25px;
}

.block-content-body input[type=checkbox] {
    display: none;
}

.block-content-body label:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background-color: #333333;
    color: #f3f3f3;
    text-align: center;
    border: 2px #FFFFFF solid;
    margin-left: 5px;
}
.block-content-body input[type=checkbox]:checked+label:before {
    content: "✓";
    color: #efef0c;
    font-size: 15px;
    font-weight: bold;
    margin-left: 5px;

HTML

<div class="block-content-body">
            <ul style="list-style-type: none">

                <li>
                    <div class="checkbox">
                        <input id="op1" type="checkbox" name="options" value="1" /> <label
                            for="op1"> Rapport Global + Graphes</label>
                    </div>
                </li>
                <li>
                    <div class="checkbox">
                        <input id="op2" type="checkbox" name="options" value="2" /> <label
                            for="op2"> Relevé des index</label>
                    </div>
                </li>
                <li>
                    <div class="checkbox">
                        <input id="op3" type="checkbox" name="options" value="3" /> <label
                            for="op3"> Cleanergie</label>
                    </div>
                </li>
                <li>
                    <div class="checkbox">
                        <input id="op4" type="checkbox" name="options" value="4" /> <label
                            for="op4"> X-Fi</label>
                    </div>
                </li>
                <li>
                    <div class="checkbox">
                        <input id="op5" type="checkbox" name="options" value="5" /> <label
                            for="op5"> Détail de production</label>
                    </div>
                </li>
                <li>
                    <div class="checkbox">
                        <input id="op6" type="checkbox" name="options" value="6" /> <label
                            for="op6"> Ticket de production</label>
                    </div>
                </li>
            </ul>
        </div>

Aucun commentaire:

Enregistrer un commentaire