"将类应用于第一个父级"复选框

Question

我有一组为每个循环创建的复选框，所以我想通过单击第一个复选框使第一个复选框成为父项，而其他复选框都应该是子项，该复选框是父子项复选框应该选中。

我有代码要检查，但不是所需的。

$('.checkbox-all-index-1').click(function () {
if($(this).is(':checked')) {
$('.checkbox-index').prop('checked', true);
} else {
$('.checkbox-index').prop('checked', false);
}
});

假设 html 是

<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">

现在我想将类checkbox-all-index-1应用于循环创建的复选框的第一个复选框。

这些首先是通过循环创建的复选框，如果我将类应用于一个，它适用于所有其他复选框，所以我只想用于第一个。

谢谢

Answer 1

像下面这样做：-

$('.group-selector-subscriber:nth-child(1)').click(function () {
$(this).addClass('checkbox-all-index-1');
if($(this).is(':checked')) {
$(this).siblings().prop('checked', true);
}else{
$(this).siblings().prop('checked', false);
$(this).removeClass('checkbox-all-index-1');
}
});

.checkbox-all-index-1{
width: 20px;
height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>
<div>
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>
<div>
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>

Answer 2

尝试类似的东西， 根据您的问题，

将类checkbox-all-index-1添加到第一个复选框。

$('.group-selector-subscriber').click(function() {
$('.group-selector-subscriber').first().addClass('checkbox-all-index-1')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">

Answer 3

试试这个。

$('.checkbox-all-index-1').change(function() {
if($(this).is(':checked')) {
$('.checkbox-index').prop('checked', true);
} else {
$('.checkbox-index').prop('checked', false);
}
});

Answer 4

你可以这样做父母并计算孩子：

$(".group-selector-subscriber:first").click(function(e)
{   
if($(".group-selector-subscriber:first").is(":checked"))
{
$(".group-selector-subscriber").prop("checked",true)
}
else
{
$(".group-selector-subscriber").prop("checked",false)
}
});
$(".group-selector-subscriber:not(:first)").click(function()
{
if($('.group-selector-subscriber:not(:first):checked').length===$('.group-selector-subscriber:not(:first)').length)
{
$(".group-selector-subscriber:first").prop("checked",true);
}
else
{
$(".group-selector-subscriber:first").prop("checked",false);
}
});

.group-selector-subscriber
{
width:100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">

Answer 5

试试这个：

$(document).ready(function(){
$('.group-selector-subscriber:nth-of-type(1)').change(function(){
$(this).nextAll('.group-selector-subscriber').prop('checked',$(this).prop('checked'));
$(this).toggleClass('checkbox-all-index-1',$(this).prop('checked'));
})
})

$(document).ready(function(){
$('.group-selector-subscriber:nth-of-type(1)').change(function(){
$(this).nextAll('.group-selector-subscriber').prop('checked',$(this).prop('checked'));
$(this).toggleClass('checkbox-all-index-1',$(this).prop('checked'));
})
})

.checkbox-all-index-1 {
width: 20px;
height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<div>
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>
<div>
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>

如果要更改任何复选框，请参阅影响第一个复选框，因此请使用以下命令：

$(document).ready(function(){
$('.group-selector-subscriber:nth-of-type(1)').change(function(){
$(this).nextAll('.group-selector-subscriber').prop('checked',$(this).prop('checked'));
$(this).toggleClass('checkbox-all-index-1',$(this).prop('checked'));
})
$('.group-selector-subscriber').change(function(){
var isCheck = true;
$(this).closest('div').children('.group-selector-subscriber').not(':nth-of-type(1)').each(function(){
if(!$(this).prop('checked'))
isCheck = false;
})
$(this).closest('div').children('.group-selector-subscriber:nth-of-type(1)').toggleClass('checkbox-all-index-1',isCheck);
$(this).closest('div').children('.group-selector-subscriber:nth-of-type(1)').prop('checked',isCheck);
})
})

$(document).ready(function(){
$('.group-selector-subscriber:nth-of-type(1)').change(function(){
$(this).nextAll('.group-selector-subscriber').prop('checked',$(this).prop('checked'));
$(this).toggleClass('checkbox-all-index-1',$(this).prop('checked'));
})
$('.group-selector-subscriber').change(function(){
var isCheck = true;
$(this).closest('div').children('.group-selector-subscriber').not(':nth-of-type(1)').each(function(){
if(!$(this).prop('checked'))
isCheck = false;
})
$(this).closest('div').children('.group-selector-subscriber:nth-of-type(1)').toggleClass('checkbox-all-index-1',isCheck);
$(this).closest('div').children('.group-selector-subscriber:nth-of-type(1)').prop('checked',isCheck);
})

})

.checkbox-all-index-1 {
width: 20px;
height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<div>
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>
<div>
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>