Question

我正在通过javascript / jquery创建购物清单应用程序，而且我无法使用复选框来交叉列表中的项目。我虽然越来越近了。当选中一个框时，列表中的所有项目都将被划掉，并且应用程序顶部的主文本输入中的文本也具有删除线质量。检查其中一个框应仅覆盖其旁边的相应文本。

这是我对这个特定功能的javascript：

$('#shopping-list').on('change','input[type=checkbox]',function(){
    var input = $(this).parent().siblings('input[type=text]');
    $('input').css('textDecoration','line-through');

});

此处还有应用程序当前版本的链接：

https://dl.dropboxusercontent.com/u/91499081/ShoppingList/shoppingList.html

Answer 1

简单的错误 - 我自己做了很多次。

jsFiddle demo

您正确识别要加下划线的特定输入标记，并将该标记指定给变量。

但是在你的下一个jQuery行中，你把变量名称作为一个字符串，它告诉jQuery你想获得该类型的所有元素。由于“input”是一种有效的元素类型，因此修改了所有输入元素。

因此，改变：

$('input').css('textDecoration','line-through');

要：

$(input).css('textDecoration','line-through');

我还建议选择不同的var名称。如果您使用了不同的var名称，例如“myInput”，您可能自己找到了解决方案。

根据您的评论问题：

选中/取消选中文本字段：

jsFiddle example

$('#shopping-list').on('change','input[type=checkbox]',function(){
    var input = $(this).parent().find('input[type=text]');
    if ($(this).is(':checked') ) {
        $(input).css('textDecoration','line-through');
    }else{
        $(input).css('textDecoration','none');
    }
});

Answer 2

我认为你在寻找：

$('#shopping-list').on('change','input[type=checkbox]',function(evt){
    var checkbox = $(evt.target),
        textInput = checkbox.next('input[type=text]');

    textInput.css('text-decoration', checkbox.is(':checked') ? 'line-through' : 'none');
});

您前往父母，然后选择所有输入子项作为文本输入，而不是仅选中复选框后面的文本。

检查是否选中该复选框将允许线路在用户不断点击框时切换。

购物清单应用：使用复选框来交叉项目

2 个答案: