应用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/