Question

我正在尝试使用jQuery中的一些简单方法来帮助我处理更大的问题-我有一系列复选框，每个复选框都位于div中

页面加载时，如果选中此复选框，则我希望最接近的div更改颜色，但仅更改最接近的div，而不更改其他

<form>

    <div class="col-lg-6">

        <input type="checkbox" class="go" checked="checked"/>

    </div>

    <div class="col-lg-6">

        <input type="checkbox" class="go"/>

    </div>

</form>

jQuery：

if ($('.go').is(':checked')) {
    $(this).closest('.col-lg-6').css('background-color','red');
}

我无法更改选择器等，也无法更改HTML布局-为什么这不能识别go的实例并更改最接近的div？

在上面，它什么都不做-如果我将jQuery更改为：

if ($('.go').is(':checked')) {
    $('.go').closest('.col-lg-6').css('background-color','red');
}

然后为我不想要的div上色

Answer 1

您需要使用each来确定哪个this将被上色。

例如：

$('.go:checked').each(function(index, value){
	$(this).closest('.col-lg-6').css('background-color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

    <div class="col-lg-6">

        <input type="checkbox" class="go" checked="checked"/>

    </div>

    <div class="col-lg-6">

        <input type="checkbox" class="go"/>

    </div>

</form>

如果他们没有条件或任何其他执行代码，则可以直接通过以下方式进行操作：

$('.go:checked').closest('.col-lg-6').css('background-color','red');

Answer 2

要检查一组输入检查或任何输入，可以使用Jquery：


$('input[id='value']:checked').each(

function(index,element){

//Your changes

}


);

此代码将迭代选中的输入复选框，您可以添加所需的任何代码

在jQuery中使用此代码仅定位选择器的一个实例

2 个答案: