Necesito para estilizar algunas casillas de verificación a través de jquery, pero no quiero usar plugins. Sólo necesito un simple código jQuery.

Pensé en utilizar una lista simple con estilo css.

<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>

Al mismo tiempo en el que he puesto en el código de la entrada de las casillas de verificación oculto por 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" />

Con jquery si hago clic en el enlace de » el padre de li elemento recibirá el «seleccionado» de la clase y la casilla de verificación con el mismo ID que será comprobado.

¿Crees que esto podría ser una buena solución? Es posible lograr este resultado con jQuery?

  • No, no es una buena solución, ya que no sólo ID debe ser único, pero el uso de números de IDENTIFICACIÓN es también una mala práctica y causar problemas.
  • Yo no lo uso a js estilo de casillas a todos, pero el uso de css: stackoverflow.com/a/4148544/1960455
  • ID están destinados a ser único. Puede ser que usted puede definir como la clase de lugar?
  • Puede sólo una casilla ser controlados en el tiempo? Supongo que esto es lo que quieres – radiobutton sería mejor.
  • Elmo, no, me equivoqué, me podían seleccionar más de una casilla de verificación. He editado mi pregunta.
  • Así, @JP-Hellemons respuesta es totalmente correcta. No javascript necesario – sólo CSS.

InformationsquelleAutor Pennywise83 | 2013-06-13

4 Comentarios

  1. 9

    No requiere javascript, solo 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;
    }

    para radiobutton del
    http://jsfiddle.net/jphellemons/XvZY9/1/

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

    • Yo creo que él quiere radiobutton comportamiento más bien y mal elegido checkbox. «Con jquery si hago clic en el enlace de» el padre de li elemento recibirá el «seleccionado» de la clase, el viejo li elemento con la misma clase, la pierde y la casilla de verificación con el mismo ID que será comprobado.’
    • usted está probablemente en lo cierto, entonces Pennywise83 debe utilizar la radio parte del tutorial: webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…
    • ha editado sus necesidades, por lo que su primera respuesta es bien.
    • Gracias @ElmoVanKielmo
    • Quiero señalar la configuración de display: none en la entrada de datos procesamiento de tabulación a través de esa parte de la forma inútil. Una mejor opción sería opacity: 0 y, a continuación, establezca un :focus estilo
  2. 1

    Usted puede utilizar este plugin,

    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;

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

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

    • Y donde es el uso de jQuery en @Rohan del código?
  3. 0

    Forma más sencilla que puedo pensar:

    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();

    luego en el 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;
    }
    }
  4. 0

    HTML casillas de verificación no puede ser estilizado mucho, así que es mejor hacer tu propio 😉

    Hice uno para mí y que no utiliza imágenes simplemente CSS. Así, es escalable y personalizable.

    Para obtener el valor de la casilla de verificación $('#id_of_my_custom_checkbox').val() -> verdadero/falso

    Aquí está el trabajo de violín: 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)
    }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here