购物清单应用程序：使用复选框来隔离项目

我正在通过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

来源

2013-11-22 user2976607

安置自己的HTML标记直接的问题，而不是链接到它请。 – Ennui

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

jsFiddle demo

你正确识别要强调特定的输入标签，并且在该标签分配给一个变量。

但是在您的下一个jQuery代码行中，您将变量名称作为字符串，它告诉jQuery您想获取该类型的所有元素。由于“输入”是一种有效的元素类型，因此所有输入元素都会被修改。

因此，更改：

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

要：

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

我也建议选择不同的变量名称。如果您使用了不同的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'); 
    } 
});

来源

2013-11-22 19:16:54 gibberish

谢谢，这工作！任何建议如何我可以删除删除线，如果此框未经检查？因为目前这个删除线仍然存在，即使这个箱子没有被选中。 – user2976607

@ user2976607查看我的答案更新。请记得在满意时选择正确的答案。 – gibberish

这很容易，我应该想出一个。谢谢！并选择正确答案！ – user2976607

我认为你正在寻找：

$('#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'); 
});

你正在上父母t选择所有输入的文本输入的孩子，而不是只选中复选框后面的文本。

检查复选框是否被选中将允许直线切换，因为用户不断点击该框。

来源

2013-11-22 19:01:42

当我试着这段代码什么都没有得到删除线样式 – user2976607

更改'textInput = checkbox.next（'input [type = text]'）;'到'textInput = checkbox.parent（）。next（'input [type =文字]'）;' – epascarello

购物清单应用程序：使用复选框来隔离项目

回答

相关问题