多类型错误 -- 混淆---将带有 jQuery 的 CSS 添加到复选框中

好的。超级困惑。我尝试运行我的代码并遇到多个类型错误，我不完全确定它们到底是什么意思。

我正在尝试做的是创建一个带有复选框的购物清单，并使其在选中复选框时，它会添加 css 类"text-decoration：line-through"，当它未选中时，它会删除行通过。帮助？谢谢:)

Uncaught TypeError: Cannot read property 'replace' of undefined
at Function.camelCase (jquery.min.js:2)
at Function.css (jquery.min.js:2)
at init.<anonymous> (jquery.min.js:2)
at Function.access (jquery.min.js:2)
at init.css (jquery.min.js:2)
at strikeout (check.js:6)
at HTMLButtonElement.onclick (index.html:18)

这是我的代码：

js 文件：

function strikeout(){
var checkedbox = document.getElementsByName("grocery").checked;
if (checkedbox == true){
$("checkedbox").css("text-decoration", "line-through");
} else {
$("checkedbox").css();
}
}

html 文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body><form>
<h1>Shopping List</h1>
<ul><li><input type="checkbox" name="grocery" value="milk">Milk</li>
<li><input type="checkbox" name="grocery" value="butter">butter</li>
<li><input type="checkbox" name="grocery" value="eggs">eggs</li>
<li><input type="checkbox" name="grocery" value="eggs">cheese</li>
<li><input type="checkbox" name="grocery" value="coffee">coffee</li>
</ul>
<button type="button" onclick="strikeout()">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="check.js"></script>
</body>
</html>

我对你的代码做了一些更改，让它与jQuery一起工作，因为你把它包含在你的页面上。

由于您有多个复选框，因此需要在循环中的每个元素上测试checked。document.getElementsByName("grocery").checked出现undefined，然后您正在检查它是否属实，因此Uncaught TypeError: Cannot read property 'replace' of undefined错误。

function strikeout() {
var $inputs = $('input');
$inputs.each(function() {
var $input = $(this),
isChecked = $input.is(':checked');
if (isChecked) {
$input.parent().css('text-decoration', 'line-through');
} else {
$input.parent().css('text-decoration', 'none');
}
});
}
$('button').on('click', strikeout);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form>
<h1>Shopping List</h1>
<ul>
<li>
<input type="checkbox" name="grocery" value="milk">Milk</li>
<li>
<input type="checkbox" name="grocery" value="butter">butter</li>
<li>
<input type="checkbox" name="grocery" value="eggs">eggs</li>
<li>
<input type="checkbox" name="grocery" value="eggs">cheese</li>
<li>
<input type="checkbox" name="grocery" value="coffee">coffee</li>
</ul>
<button type="button">Submit</button>
</form>

我同意@Ronak的观点，即您将遇到checkedbox作为选择器的问题，因为不存在这样的元素 -但是，查看您的堆栈跟踪，看起来导致错误的问题在第 6 行，您调用.css()没有参数：

$("checkedbox").css();

查看.css文档，没有支持这样的签名 - 它可能正在寻找一个参数，但没有找到。您甚至可以将该行批量放入控制台，它将触发相同的错误 - 如果您添加适当的参数，它将运行而不会引发错误：

$("checkedbox").css('color', 'red');

也许回顾一下你打算这条线完成什么。祝你好运！

首先，选择器$("checkedbox")意味着jQuery选择所有具有标签<checkedbox></checkedbox>的元素，这就是发生错误的原因。鑫达

然后。。。如果你想在Checbox更改时更改CSS(例如，当用户单击复选框时)，那么你应该创建jQuery.on()脚本：

$(document).ready(function() {
//when <input> with name "grocery" clicked/changed ...
$("input[name=grocery]").on('click change',function() {
if ($(this).is(":checked")) { //check if checked
$(this).css("text-decoration", "line-through");
} else {
$(this).css("text-decoration", ""); //to reset the css
}
});
});

希望这有帮助。祝你好运！:)

加法：

你也可以这样做：

$(document.body).on('click change','input[name=grocery]',function() {

此平均事件处理程序将绑定到主体而不是每个元素。如果您的复选框是动态加载/创建的，例如使用 ajax。;)

我只是通过在输入上使用伪选择器来缩小它。结果是相同的，您也可以在选中所有复选框后使用过滤器，例如

$('input').filter(function(index){
return $(this).is(":selected");
}).each(function(){
$(this).parent().css("text-decoration", "line-through");
});

这是工作示例：

$(function(){
function strikeout() {
$('input').parent().css("text-decoration", "none");
$('input:checked').each(function(){
$(this).parent().css("text-decoration", "line-through");
});
}
$('button').on('click', strikeout);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form>
<h1>Shopping List</h1>
<ul>
<li>
<input type="checkbox" name="grocery" value="milk">Milk</li>
<li>
<input type="checkbox" name="grocery" value="butter">butter</li>
<li>
<input type="checkbox" name="grocery" value="eggs">eggs</li>
<li>
<input type="checkbox" name="grocery" value="eggs">cheese</li>
<li>
<input type="checkbox" name="grocery" value="coffee">coffee</li>
</ul>
<button type="button">Submit</button>
</form>

我已经更新了你的JS部分。

function strikeout(){
//Clear the line through
$("[name='grocery']").each(function(){
$(this).parent().css("text-decoration", "none")
});
//Fetch the Checked items
var checkedbox = $("[name='grocery']:checked");
//Add Line through to the <li>
checkedbox.each(function(){
$(this).parent().css("text-decoration", "line-through");
});
}

相关内容

最新更新

热门标签：