Question

我已根据复选框点击并取消选择，编写了选择取消选择的代码。如何根据单击该复选框旁边的标题来选择和取消选择？我会动态地拥有ID。

$(document).on("click", "[id^='columnCheckbox_']", function (e) {
        if ($(this).hasClass('unchkd')) {
            $(this).removeClass('unchkd').addClass('chkd');
        } else {
            $(this).removeClass('chkd').addClass('unchkd');
        }
    });

Answer 1

尝试

$(document).on("click", "li", function (e) {
    $(this).find('div[id^=columnCheckbox_]').toggleClass('unchkd chkd')
});

演示：Fiddle

toggleClass()

我建议在div中添加一个额外的类来设置它的样式

<ul>
    <li>
        <div class="chkd checkbox" id="columnCheckbox_1" value="chkbox_Title"></div>
        <div class="2" style="padding-left: 20px;" value="colName_Title">Title</div>
    </li>
    <li>
        <div class="chkd checkbox" id="columnCheckbox_2" value="chkbox_Title"></div>
        <div class="2" style="padding-left: 20px;" value="colName_Title">desc</div>
    </li>
</ul>

然后

.chkd {
    background-color: #29abe1;
}
.unchkd {
    background-color: white;
    border: 1px solid black;
}
.checkbox {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    float: left;
}

和

$(document).on("click", "li", function (e) {
    $(this).find('.checkbox').toggleClass('unchkd chkd')
});

演示：Fiddle

单击标题时，Jquery选择取消选择复选框

1 个答案: