Jquery在单击标题时选择取消选择复选框答案

【问题标题】：Jquery select un select checkbox on clicking titleJquery在单击标题时选择取消选择复选框
【发布时间】：2014-03-06 08:37:12
【问题描述】：

我已经编写了代码来根据复选框单击和取消单击来选择取消选择。如何根据单击旁边该复选框的标题来选择和取消选择？我将有动态的 id。

Fiddle code is here

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

【问题讨论】：

标签： jquery html css select checkbox

【解决方案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

【讨论】：