更改標籤CSS類複選框，如果選中

我有隱藏的複選框。我將圖像作爲複選框的標籤，以便在單擊圖像時單擊複選框。我正在嘗試使圖像具有不同的不透明度，具體取決於該框是否被選中。這裏是我的形象標籤的CSS：更改標籤CSS類複選框，如果選中

.checkbox-label{ 
    opacity: .2; 
} 
.checkbox-label:hover{ 
    opacity: .5; 
} 

.checkbox-label-after-click{ 
    opacity: 1; 
}

下面是我的javascript移動類

<script> 
    $('.checkbox-label').click(function(){ 
     var the_input = $(this).next('input'); 
     if(the_input.checked){ 
      $(this).addClass("checkbox-label-after-click"); 
     } else { 
      $(this).removeClass("checkbox-label-after-click"); 
     } 
    }); 
</script>

基本上，當有人點擊標籤上，它應該抓住下一個輸入，這是複選框，標籤的類應該改變。我也嘗試過切換addClass和removeClass方法，這使得類開關在第一次點擊時工作，但從來沒有。

這裏是html：

我如何得到這個工作？

來源

2015-02-07 Philip7899

顯示您的HT ML。你不需要重複你的問題。 – Satpal 2015-02-07 17:18:43

你可以使用toggleClass？ – ARWVISIONS 2015-02-07 17:19:26

我可以使用toggleClass，理論上它會有相同的效果，但是這個類不會依賴於是否檢查輸入，而是依賴於點擊標籤的時間。這有點冒險。 – Philip7899 2015-02-07 17:21:10

您可以簡單地使用toggleClass()。你的代碼不起作用the_input是一個jQuery對象，它不具有checked屬性。您可以使用.get()來獲取底層的DOM元素。

像

the_input.get(0).checked or the_input[0].checked

根據你的代碼

$('.checkbox-label').click(function(){ 
    $(this).toggleClass("checkbox-label-after-click", the_input.get(0).checked); //You can also use the_input.prop('checked') 
});

來源

2015-02-07 17:23:09 Satpal

我猜測它的下降時，檢查其檢查。你會好起來的只是撥動類當您單擊該標籤

$('.checkbox-label').click(function(){ 
    $(this).toggleClass("checkbox-label-after-click"); 
});

如果你真的要檢查它的狀態，你可以做這樣的事情：

$('.checkbox-label').click(function(){ 
    var the_input = $(this).next('input'); 
    if(the_input.prop('checked')){ 
     $(this).addClass("checkbox-label-after-click"); 
    } else { 
     $(this).removeClass("checkbox-label-after-click"); 
    } 
});

使用the_input.prop('checked')，看是否輸入是否被檢查。它返回一個布爾值。

來源

2015-02-07 17:21:19 haxtbh

由於the_input是你不能使用JavaScript的checked屬性，你可以使用the_input[0].checked或使用prop method一個jQuery對象。

替換此：

if(the_input.checked){

有了這個：

if(the_input.prop('checked')){

來源

2015-02-07 17:25:51

我會用純CSS做到這一點，是這樣的：

label { 
 
    cursor: pointer; 
 
} 
 
/* Change cursor when the label is hovered */ 
 

 
input[type=checkbox] { 
 
    display: none; 
 
} 
 
/* Hide the ugly default radio styling */ 
 

 
label > span { 
 
    opacity: 0.2; 
 
} 
 
/* Hide the checkmark by default */ 
 

 
input[type=checkbox]:checked + span { 
 
    opacity: 1; 
 
    color: green; 
 
} 
 
/* Show the checkmark when the radio is checked */

<label> 
 
    <input type="checkbox" name="obvious"><span>✓</span> I look good.</label> 
 
<br/> 
 
<label> 
 
    <input type="checkbox" name="obvious"><span>✓</span> Cause we've been re-styled!</label> 
 
<br/> 
 
<label> 
 
    <input type="checkbox" name="obvious"><span>✓</span> I've got a green checkmark if you click me.</label> 
 
<br/> 
 
<label> 
 
    <input type="checkbox" name="obvious"><span>✓</span> We are a family of checkmarks!</label>

來源

2015-02-07 17:30:38

更改標籤CSS類複選框，如果選中

回答

相關問題