Styling Checkboxen mit jQuery

Ich brauche zu stilisieren einige Checkboxen durch jquery, aber ich will nicht von plugins. Ich brauche nur eine einfache jQuery-code.

Dachte ich, eine einfache Liste mit css-Stil.

<ul id="list">
 <li class="selected"><a id="1" href="#">1</a></li>
 <li><a id="2" href="#">2</a></li>
 <li><a id="3" href="#">3</a></li>
</ul>

In der gleichen Zeit, die ich in den code die Eingabe Kontrollkästchen versteckte css:

<input type="checkbox" id="1" name="rivista_numero" value="1" checked />    
<input type="checkbox" id="2" name="rivista_numero" value="2" />
<input type="checkbox" id="3" name="rivista_numero" value="3" />

Mit jquery, wenn ich auf den " link das übergeordnete li-element erhalten die "selected" - Klasse und die checkbox mit der ID überprüft werden.

Denken Sie, dass dies könnte eine gute Lösung sein? Ist es möglich, um dieses Ergebnis zu erreichen, mit jQuery?

Nein, es ist keine gute Lösung, da sollte nicht nur ID 's eindeutig sein, aber mit zahlen wie ID' s ist auch eine schlechte Praxis und wird Probleme verursachen.
Ich würde nicht mit js style-Kästchen alle, aber mit css: stackoverflow.com/a/4148544/1960455
Die IDS sollen eindeutig sein. Kann man Sie definieren als Klasse statt?
Kann nur eine checkbox überprüft werden? Ich denke, das ist, was Sie wollen - radiobutton-Komponente besser wäre.
So, @JP-Hellemons Antwort ist völlig korrekt. Kein javascript benötigt - nur CSS.

InformationsquelleAutor Pennywise83 | 2013-06-13

9

Kein javascript erforderlich, nur CSS
http://jsfiddle.net/jphellemons/XvZY9/

HTML:
```
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
<br/>
<input type="checkbox" id="c2" name="cc" />
<label for="c2"><span></span>Check Box 2</label>
```
CSS:
```
input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label {
    color:#000;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}
```
für radiobutton -
http://jsfiddle.net/jphellemons/XvZY9/1/

Quelle: http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/demo.html

Ich glaube, er will radiobutton Verhalten und eher falsch gewählt checkbox. "Mit jquery, wenn ich auf den" link das übergeordnete li-element erhalten die "selected" - Klasse, die alten li-element mit der gleichen Klasse verliert und die checkbox mit der gleichen ID wird überprüft.'
Sie sind wahrscheinlich Recht, dann Pennywise83 sollte der radio Teil vom tutorial: webdesign.tutsplus.com/tutorials/htmlcss-tutorials/...
bearbeitet hat seine Anforderungen, so Ihre erste Antwort in Ordnung ist.
Danke @ElmoVanKielmo
Möchte nur darauf hinweisen Einstellung display: none auf die Eingabe render-Tab durch, dass ein Teil der form nutzlos. Bessere option wäre opacity: 0 festlegen und dann einen :focus Stil

InformationsquelleAutor JP Hellemons

Können Sie dieses plugin verwenden,

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";


/* No need to change anything after this */


document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
    init: function() {
        var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
        for(a = 0; a < inputs.length; a++) {
            if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
                span[a] = document.createElement("span");
                span[a].className = inputs[a].type;

                if(inputs[a].checked == true) {
                    if(inputs[a].type == "checkbox") {
                        position = "0 -" + (checkboxHeight*2) + "px";
                        span[a].style.backgroundPosition = position;
                    } else {
                        position = "0 -" + (radioHeight*2) + "px";
                        span[a].style.backgroundPosition = position;
                    }
                }
                inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                inputs[a].onchange = Custom.clear;
                if(!inputs[a].getAttribute("disabled")) {
                    span[a].onmousedown = Custom.pushed;
                    span[a].onmouseup = Custom.check;
                } else {
                    span[a].className = span[a].className += " disabled";
                }
            }
        }
        inputs = document.getElementsByTagName("select");
        for(a = 0; a < inputs.length; a++) {
            if(inputs[a].className == "styled") {
                option = inputs[a].getElementsByTagName("option");
                active = option[0].childNodes[0].nodeValue;
                textnode = document.createTextNode(active);
                for(b = 0; b < option.length; b++) {
                    if(option[b].selected == true) {
                        textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
                    }
                }
                span[a] = document.createElement("span");
                span[a].className = "select";
                span[a].id = "select" + inputs[a].name;
                span[a].appendChild(textnode);
                inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                if(!inputs[a].getAttribute("disabled")) {
                    inputs[a].onchange = Custom.choose;
                } else {
                    inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
                }
            }
        }
        document.onmouseup = Custom.clear;
    },
    pushed: function() {
        element = this.nextSibling;
        if(element.checked == true && element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
        } else if(element.checked == true && element.type == "radio") {
            this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
        } else if(element.checked != true && element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
        } else {
            this.style.backgroundPosition = "0 -" + radioHeight + "px";
        }
    },
    check: function() {
        element = this.nextSibling;
        if(element.checked == true && element.type == "checkbox") {
            this.style.backgroundPosition = "0 0";
            element.checked = false;
        } else {
            if(element.type == "checkbox") {
                this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
            } else {
                this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
                group = this.nextSibling.name;
                inputs = document.getElementsByTagName("input");
                for(a = 0; a < inputs.length; a++) {
                    if(inputs[a].name == group && inputs[a] != this.nextSibling) {
                        inputs[a].previousSibling.style.backgroundPosition = "0 0";
                    }
                }
            }
            element.checked = true;
        }
    },
    clear: function() {
        inputs = document.getElementsByTagName("input");
        for(var b = 0; b < inputs.length; b++) {
            if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
            } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 0";
            } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
            } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 0";
            }
        }
    },
    choose: function() {
        option = this.getElementsByTagName("option");
        for(d = 0; d < option.length; d++) {
            if(option[d].selected == true) {
                document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
            }
        }
    }
}
window.onload = Custom.init;

Vom http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Demo ist hier http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/example/

Und wo ist jQuery in @Rohan ' s code?

InformationsquelleAutor Rohan Kumar

Einfachste Weg, die ich denken kann:

var setupCheckboxes = function() {
    //Checkbox Styling
    $('input[type=checkbox]').each(function() {
        var $this = $(this);
        $this.addClass('checkbox');
        $('<span class="checkbox"></span>').insertAfter($this);
        if ($this.is(':checked')) {
            $this.next('span.checkbox').addClass('on');
        };
        $this.fadeTo(0,0);
        $this.change(function(){
            $this.next('span.checkbox').toggleClass('on');
        });
    });
};
setupCheckboxes();

dann in der css -

.checkbox {
    position: relative;
    z-index: 10;
}

span.checkbox {
    z-index: 5;
    display: inline-block;
    width: 15px;
    height: 15px;
    background: #fff;
    border: 1px solid #000;
    margin: 1px 0 0 -14px;
    top: 3px;
    float: left;
    &.on {
        background: $blue;
    }
}

InformationsquelleAutor Callam

HTML Checkboxen können nicht hochstilisiert werden zu viel, daher ist es am besten, Ihre eigenen zu machen 😉

Ich machte einen für mich und er verwendet keine Bilder, die einfach nur CSS. So, es ist skalierbar und anpassbar.

Um den Wert der checkbox $('#id_of_my_custom_checkbox').val() -> true/false

Hier ist die Arbeit fiddle: https://jsfiddle.net/JerryGoyal/xr62yara/8/

HTML:

<div>

            <div id='mycheckbox' class='custom-checkbox'>
                <div class='custom-tick'></div>
            </div>

            <span>I agree</span>

        </div>

CSS

.custom-checkbox{
    border: solid 2px orange;
    height: 15px;
    width: 15px;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
  }
.custom-tick{
    border: inherit;
    display: inherit;
    cursor: inherit;
    visibility: hidden;
    height: 8px;
    width: 5px;
    transform: rotate(45deg);
    border-left: 0;
    border-top: 0;
    border-width: 2px;
    margin: 0px 0px 3px 4px;
}

JS:

$(document).ready(function () {
    $('.custom-checkbox').click(function (e) {
        toggleCustomCheckbox(e.target);
    })
});

function toggleCustomCheckbox(el) {
    var tickEl = $(el).find('.custom-tick').addBack('.custom-tick');
    if (tickEl.css('visibility') === 'hidden') {
        tickEl.css('visibility', 'visible')
        $('.custom-checkbox').val(true)
        alert('you ticked me')
    } else {
        tickEl.css('visibility', 'hidden')
        $('.custom-checkbox').val(false)
        alert('you un-ticked me')
    }

}
function setCustomCheckbox(checkboxid, val) {
    var tickEl = $(checkboxid).find('.custom-tick').addBack('.custom-tick');
    if (val && val === true) {
        tickEl.css('visibility', 'visible')
        $('.custom-checkbox').val(true)
    }
    else {
        tickEl.css('visibility', 'hidden')
        $('.custom-checkbox').val(false)
    }
}

InformationsquelleAutor JerryGoyal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.