jQuery的 - 点击复选框添加类和删除类

我使用的引导，以创建一个复选框，我想创建一个可在所有的复选框，反之亦然（我知道在这个计算器很多导游）点击一个复选框，但总之它只能用于输入。jQuery的 - 点击复选框添加类和删除类

在这种情况下，我与封闭的标签“标签”的输入，激活复选框引导时会自动添加“活动”类，这个标签，导致了“检查”的出现。当我试图执行将添加的“选中”属性复选框的输入这里找到脚本，他们并没有因为这个原因工作，所以我尝试了以下内容：

$('label#seleccionartodos').click(function(){ 
    $('input.videoscheck').prop('checked', true).parent().addClass('active'); 
});

这是我的HTML：

<div class="form-group" data-toggle="buttons"> 
<label for="selectall">SELECT/UNSELECT ALL:</label> 
<label class="btn btn-success" id="seleccionartodos"> 
    <input type="checkbox" id="selectall" autocomplete="off"> 
    <span class="glyphicon glyphicon-ok"></span> 
</label> 
</div> 
<div class="form-group" data-toggle="buttons"> 
    <label class="btn btn-success"> 
    <input type="checkbox" class="videoscheck" autocomplete="off"> 
    <span class="glyphicon glyphicon-ok"></span> 
    </label> 
</div> 
<div class="form-group" data-toggle="buttons"> 
    <label class="btn btn-success"> 
    <input type="checkbox" class="videoscheck" autocomplete="off"> 
    <span class="glyphicon glyphicon-ok"></span> 
    </label> 
</div> 
<div class="form-group" data-toggle="buttons"> 
    <label class="btn btn-success"> 
    <input type="checkbox" class="videoscheck" autocomplete="off"> 
    <span class="glyphicon glyphicon-ok"></span> 
    </label> 
</div>

这个工程半途而废，当我点击复选框，添加“选中”属性的所有复选框与“.videoscheck”类，并还增加了‘积极的’类包围他们的父标签。

但是因为我对jQuery不太好，所以我不知道该怎么做，所以当我再次点击它时，所有其他复选框将被取消选择（即与最初操作相反）。

Here's a Fiddle showing what I'm exposing.

来源

2017-06-19 Kokox

$('label#seleccionartodos').click(function(){ 
    $('input.videoscheck').prop('checked', $(this).children('input').is(':checked')) 
     .parent().toggleClass('active'); 
});

但我更喜欢这种方式：（你已经绑定标签复选框，这样你就可以对付change事件复选框）的

$('#selectall').on('change', function() { 
    $('input.videoscheck').prop('checked', $(this).is(':checked')).parent().toggleClass('active'); 
});

来源

2017-06-19 02:24:11

这很好。感谢您的帮助，并感谢那些花时间回复的人。 – Kokox

-1

jQuery有一个toggleClass功能：

$('div').click(function() { 
    $(this).toggleClass('active'); 
}

来源

2017-06-19 02:25:48 mattias

我认为将复选框本身的更改事件绑定更好：

$('input#selectall').change(function(){ 
    if (this.checked) { 
    $('input.videoscheck').prop('checked', true).parent().addClass('active'); 
    } else { 
    $('input.videoscheck').prop('checked', false).parent().removeClass('active'); 
    } 
});

来源

2017-06-19 02:31:31

jQuery的 - 点击复选框添加类和删除类

回答

相关问题