Toggle標籤的類

我剛剛開始使用jQuery，我有一個表單我想用標籤替換複選框，這些標籤將更改顏色以指示覆選框是否被選中。因此，我的代碼很胖，使標籤完全消失，然後再次出現相同（錯誤）的類，而不僅僅是.off類。Toggle標籤的類

如果這是錯誤的方法讓我知道，我不熟悉最佳實踐，也不熟悉JS的設計模式。

下面是代碼，我有：

HTML：

<label class='off'> 
    <input type='checkbox'> 
    TEXT 
</label>

CSS：

label { 
    padding: 3px; 
    font-size: 16px; 
} 
.off { 
    background-color: #E00; 
} 
.on { 
    background-color: #0C0; 
} 
label > input { 
    display: none; 
}

的Javascript：

$(document).ready(function(){ 
    $("label").click(function(){ 
    $(this).first().toggle(function(){ 
     $(this).first() 
     .removeClass("off") 
     .addClass("on"); 
    }, function(){ 
     $(this).first() 
     .removeClass("on") 
     .addClass("off"); 
    }); 
    }); 
});

來源

2014-09-10 sgp667

看看[jQuery的toggleClass（）]（HTTP：// API。 jquery.com/toggleClass/）。只是爲了讓你的代碼更清潔。 – Cohars 2014-09-10 22:52:21

如果你打算使用jQuery，我建議使用以下代替：

Updated Example

$('input:checkbox').off('change').on('change', function(){ 
    $(this).parent('label').prop('class', this.checked ? 'on' : 'off'); 
});

您還可以避免jQuery的完全重組的HTML和使用:checked僞類。

Alternative example

HTML

<input type="checkbox" id="checkbox"> 
<label for="checkbox">Text</label>

CSS

label { 
    padding: 3px; 
    font-size: 16px; 
    background-color: #E00; 
} 
input[type="checkbox"] { 
    display: none; 
} 
input:checked + label { 
    background-color: #0C0; 
}

來源

2014-09-10 22:54:50

這裏的標籤背景顏色響應複選框是否通過檢查輸入本身的checked財產檢查的例子：

$(function() { 
    $('input[type="checkbox"]').change(function() { 
     var on = this.checked; 
     $(this).parent('label').toggleClass('off', !on).toggleClass('on', on); 
    }); 
});

jsFiddle Demo

來源

2014-09-10 22:56:17

注意複選框的狀態可能會改變，但不會點擊它，聽'change'事件會更好。我認爲這個複選框應該是隱藏的。 – Oriol 2014-09-10 23:03:39

@Oriol：好點。我已將您的建議併入我的答案和jsFiddle。 – 2014-09-10 23:06:40

你只能做CSS：

<input id="mycheckbox" type="checkbox" /> 
<label for="mycheckbox">TEXT</label>

input[type="checkbox"] { 
    display: none; 
} 
input[type="checkbox"] + label{ 
    padding: 3px; 
    font-size: 16px; 
    background-color: #E00; 
} 
input[type="checkbox"]:checked + label { 
    background-color: #0C0; 
}

Demo

來源

2014-09-10 22:58:22 Oriol

Toggle標籤的類

回答

相關問題