應用if和else條件使用jQuery添加和刪除類

Question

我已經創建了下面的代碼，我想創建一個if/else條件，當用戶單擊標籤時，將添加一個類，並且在unclicks班級將被刪除。我卡住了應用相同的。

我的代碼如下。

LIVE FIDDLE LINK

Complete working code here

HTML

<div class="customCheckboxBtns"> 
<div class="ck-button"><label><input checked="checked" name="column-2" type="checkbox">1</label></div> 
<div class="ck-button"><label class="selected"><input checked="checked" name="column-3" type="checkbox">2</label></div><!-- This is how it will be added dynamically --> 
<div class="ck-button"><label><input checked="checked" name="column-4" type="checkbox">3</label></div> 
<div class="ck-button"><label><input checked="checked" name="column-5" type="checkbox">4</label></div> 
<div class="ck-button"><label><input checked="checked" name="column-6" type="checkbox">5</label></div> 
</div> 

CSS

.customCheckboxBtns{ 
    margin-bottom: 1rem; 
    margin-top: 0.25rem; 
    overflow:auto; 
} 

.ck-button { 
    margin-right: 0.375rem; 
    background-color:#ffffff; 
    border-radius:4px; 
    border:1px solid #26a69a; 
    overflow:auto; 
    float:left; 
    font-family: 'Source Sans Pro', sans-serif; 
    transition: all 0.2s ease 0s; 
    color:#999999; 
} 

.ck-button:hover { 
    background:#7dcac2; 
    border:1px solid #26a69a; 
    color:#26a69a; 
    background-color:#ffffff; 
} 

.ck-button label { 
    text-align:center; 
    padding: 0.25rem 0.5rem; 
    display:block; 
    background:#26a69a; 
    color:#ffffff; 
    transition: all 0.2s ease 0s; 
} 
.ck-button label:hover{ 
    cursor:pointer; 
} 
.ck-button input:checked { 
    background: #26a69a none repeat scroll 0 0; 
    color: #ffffff; 
    padding: 0.25rem 0.5rem; 
    transition: all 0.2s ease 0s; 
} 
.ck-button label:hover{ 
    background: #7dcac2 none repeat scroll 0 0; 
    color:#ffffff; 
} 
.ck-button label input { 
    position:absolute; 
    /*top:-2000px;*/ 
} 
.ck-button label input[type="checkbox"] { 
    position: absolute; 
    visibility: hidden; 
} 
label.selected{ 
    background: #7dcac2 none repeat scroll 0 0; 
     color:#ffffff;  
} 

SCRIPT

$('.ck-button label').on('click', function() { 
    $(this).addClass('selected');  
}); 

$('.ck-button label').on('click', function() { 
    $(this).removeClass('selected'); 
}); 

Answer 1

既然你要複製的複選框的行爲，我可能會使用類似的東西：

$('.ck-button input').on('change', function() { 
 
    $(this.parentNode).toggleClass('selected', this.checked); 
 
});

.customCheckboxBtns { 
 
    margin-bottom: 1rem; 
 
    margin-top: 0.25rem; 
 
    overflow: auto; 
 
} 
 

 
.ck-button { 
 
    margin-right: 0.375rem; 
 
    background-color: #ffffff; 
 
    border-radius: 4px; 
 
    border: 1px solid #26a69a; 
 
    overflow: auto; 
 
    float: left; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    transition: all 0.2s ease 0s; 
 
    color: #999999; 
 
} 
 

 
.ck-button:hover { 
 
    background: #7dcac2; 
 
    border: 1px solid #26a69a; 
 
    color: #26a69a; 
 
    background-color: #ffffff; 
 
} 
 

 
.ck-button label { 
 
    text-align: center; 
 
    padding: 0.25rem 0.5rem; 
 
    display: block; 
 
    background: #26a69a; 
 
    color: #ffffff; 
 
    transition: all 0.2s ease 0s; 
 
} 
 

 
.ck-button label:hover { 
 
    cursor: pointer; 
 
} 
 

 
.ck-button input:checked { 
 
    background: #26a69a none repeat scroll 0 0; 
 
    color: #ffffff; 
 
    padding: 0.25rem 0.5rem; 
 
    transition: all 0.2s ease 0s; 
 
} 
 

 
.ck-button label:hover { 
 
    background: #7dcac2 none repeat scroll 0 0; 
 
    color: #ffffff; 
 
} 
 

 
.ck-button label input { 
 
    position: absolute; 
 
    /*top:-2000px;*/ 
 
} 
 

 
.ck-button label input[type="checkbox"] { 
 
    position: absolute; 
 
    visibility: hidden; 
 
} 
 

 
label.selected { 
 
    background: #7dcac2 none repeat scroll 0 0; 
 
    color: #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="customCheckboxBtns"> 
 
    <div class="ck-button"> 
 
    <label> 
 
     <input name="column-2" type="checkbox">1</label> 
 
    </div> 
 
    <div class="ck-button"> 
 
    <label class="selected"> 
 
     <input checked="checked" name="column-3" type="checkbox">2</label> 
 
    </div> 
 
    <div class="ck-button"> 
 
    <label> 
 
     <input name="column-4" type="checkbox">3</label> 
 
    </div> 
 
    <div class="ck-button"> 
 
    <label> 
 
     <input name="column-5" type="checkbox">4</label> 
 
    </div> 
 
    <div class="ck-button"> 
 
    <label> 
 
     <input name="column-6" type="checkbox">5</label> 
 
    </div> 
 
</div>

的jsfiddle：https://jsfiddle.net/zdwjnLvL/15/

Answer 2

下面應該工作：

$('.ck-button label').on('click', function (event) { 
     event.preventDefault(); 
     $(this).toggleClass("selected"); 
});` 

https://jsfiddle.net/YvCil/zdwjnLvL/5/

雖然這不會選中複選框。當標籤上有點擊處理程序時，它將觸發標籤和複選框。見Jquery click event triggers twice when clicked on html label

Answer 3

的問題是，點擊標籤時點擊處理程序會觸發兩次。 當你點擊標籤時，它會觸發點擊處理程序，但它也會將點擊發送到關聯的輸入複選框。該點擊會觸發包含元素的標籤，導致點擊處理程序再次觸發。

您可能想要聽input複選框中的click或change事件，而不是標籤。這對於可訪問性也很好，因爲它仍會改變您的輸入值，並允許用戶使用鍵盤來完成此操作。

的JavaScript

$('.ck-button input[type="checkbox"]').change(function() { 
    $(this).closest('label').toggleClass('selected'); 
}); 

的jsfiddle：https://jsfiddle.net/zdwjnLvL/19/