Question

我的代码是：

$(function(){

    $('input:checkbox').on('change','span',function(){
        var input= $(this).find('span');
        if($(this).is(':checked')){
            //alert($(this).name);
            $(input).css('textDecoration','line-through');
        }else{
            $(input).css('textDecoration','none');
        }

    })
})

这是我的HTML

 <div><input  type="checkbox" id="a1"></input><span>This is ok</span></div><br/>
    <div><input type="checkbox" id="a2" ></input><span>This is yes</span></div>

但它不起作用。我想我没有得到正确的输入。提前谢谢。

Answer 1

您需要定位更改处理程序的复选框元素，然后跨度是下一个兄弟

$(function () {
    $('input:checkbox').on('change', function () {
        var input = $(this).next('span');
        if (this.checked) {
            $(input).css('textDecoration', 'line-through');
        } else {
            $(input).css('textDecoration', 'none');
        }
    })
})

演示：Fiddle

如果您想要事件委托

$(function () {
    $(document).on('change', 'input:checkbox', function () {
        var input = $(this).next('span');
        if (this.checked) {
            $(input).css('textDecoration', 'line-through');
        } else {
            $(input).css('textDecoration', 'none');
        }
    })
})

演示：Fiddle

Answer 2

尝试

$(document).on('change','input:checkbox',function() {
   var input= $(this).closest('span');
   ....
}

Answer 3

试试这个：

$(function(){
$('input:checkbox').on('change',function(){
    if($(this).is(':checked')){
        $(this).siblings('span').css('text-decoration','line-through');
    }else{
        $(this).siblings('span').css('text-decoration','none');
    }
});
});

DEMO

如何通过JQuery删除复选框的文本

3 个答案: