jQuery toggleClass e assegno

Question

Non riesco a farlo funzionare. Se rimuovo la parte casella dello script delle opere di classe a ginocchiera, ma se lo aggiungo, allora non è più a levetta classe. Sono un dilettante totale in questo modo che io apprezzo molto di aiuto. Sto utilizzando jQuery versione 1.4.1. Grazie.

$("li.imprint").click(function() {
  $(this,"li.imprint").toggleClass('selected').children("input[@type=checkbox]")[0].click();
});

Quindi, in sostanza sto costruendo un modulo web per le persone a personalizzare le penne. Quindi hanno bisogno di scegliere ciò stampa di colore che vogliono. Piuttosto che solo un elenco noioso di colori, ho voluto mostrare un campione del colore. Così ho pensato che sarebbe creare una lista, mettere un po 'caselle di controllo in modo che possano selezionare i colori e usare i CSS per nascondere la casella attuale quindi è tutto bello e pulito. Ho visto il codice per ottenere questo risultato per i pulsanti di scelta e ho ottenuto che funziona bene. Ho cercato di adattarlo alle caselle di controllo, ma il problema era che è possibile selezionare solo un pulsante di scelta, ma più caselle di controllo.

Per darvi un esempio semi-funzione. Se vi dirigete al sito beta, è vivo (non una buona pratica lo so) e cerco di personalizzare una penna si può vedere quello che sto cercando di fare. Pensfast.com Beta

Answer 1

Dato i dati aggiornati, questo è ciò che si vuole:

$("li.imprint").click(function(){
    var $checkbox = $(this).toggleClass('selected').find(':checkbox');
    if($(this).hasClass('selected')) {
      $checkbox.attr('checked','checked');
    } else {
      $checkbox.removeAttr('checked');
    }
})

Sono preoccupato che le vostre classi non sono corrette. Si riferimento li.imprint nella tua domanda, ma la pagina ho visitato sul tuo sito aveva la classe di li.Barellimprint Ovviamente, questa risposta non funzionerà se i selettori sono sbagliate. Provare a cambiare la prima linea a:

$("li.Barrelimprint").click(function(){

E questo codice dovrebbe funzionare su questa pagina .

Answer 2

Questo ha funzionato per me -. Ospita anche più caselle di controllo che potrebbero ciascuno un avere uno stato iniziale diverso

CSS:

.dragable { margin: 4px; border: 1px solid #c6e1ff; line-height: 15px;}
.dragable.selected, .dragable.unselected.selected  {background: #ebf5ff;}
.dragable.unselected {background: #ffffff;}

HTML:

<ul id="sortable">
    <li class="dragable selected ui-state-default">
    <input name="list" type="checkbox"  checked="checked" />Results</li>
    <li class="dragable unselected ui-state-default">
    <input name="list" type="checkbox" />Benefits </li>
</ul>

La Javascript:

<script>
    $("li.dragable").click(function(){
    var $checkbox = $(this).toggleClass('selected').find(':checkbox');
    if($(this).hasClass('selected')) {
      $checkbox.attr('checked','checked');
    } else  {
      $checkbox.removeAttr('checked');
    }
})
</script>

Spero che questo aiuti!

Answer 3

Prova:

$("li.imprint").click(function() {
  $(this,"li.imprint").toggleClass('selected')
        .children("input:checkbox:first").attr('checked',true);
});

posso chiedere perché si desidera chiamare 'click' sulla casella di controllo?

se si desidera controllare o caselle di controllo deselezionate, leggere questo .

Aggiorna

provare questo:

$("li.imprint").click(function() {
      $(this).toggleClass('selected')
      $(':checkbox',this).attr('checked',$(this).is('selected'));
 });