Javascript 多个类型错误--混乱--将带有jquery的css添加到复选框_Javascript_Jquery_Css_Checkbox_Typeerror

Javascript 多个类型错误--混乱--将带有jquery的css添加到复选框

javascript jquery css checkbox

Javascript 多个类型错误--混乱--将带有jquery的css添加到复选框,javascript,jquery,css,checkbox,typeerror,Javascript,Jquery,Css,Checkbox,Typeerror,嗯。超级困惑。我试着运行我的代码，但得到了多个类型错误，我甚至不完全确定它们到底是什么意思我试图做的是创建一个带有复选框的购物清单，这样当复选框被选中时，它就会添加css类“文本装饰：行通过”，当它被取消选中时，它就会删除行通过。帮忙？谢谢：） html文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

嗯。超级困惑。我试着运行我的代码，但得到了多个类型错误，我甚至不完全确定它们到底是什么意思

我试图做的是创建一个带有复选框的购物清单，这样当复选框被选中时，它就会添加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>


购物清单
牛奶
黄油
蛋
奶酪
咖啡

提交

我同意@Ronak的观点，即您将在使用

checkedbox

作为选择器时遇到问题，因为不存在此类元素——但是，从堆栈跟踪来看，导致错误的问题似乎出现在第6行，您在该行调用

.css（）

时没有参数：

$("checkedbox").css();

看看下面的例子，没有人支持这样的签名——它可能在寻找一个参数，但没有找到任何参数。您甚至可以将该行全部放到控制台中，它将触发相同的错误——如果添加适当的参数，它将在不引发错误的情况下运行：

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

也许回顾一下你打算在这一行完成什么。祝你好运

我同意@Ronak的观点，即您将遇到使用

checkedbox

作为选择器的问题，因为不存在这样的元素——但是，从堆栈跟踪来看，导致错误的问题似乎出现在第6行，您在该行调用

.css（）

，没有参数：

$("checkedbox").css();

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

也许回顾一下你打算在这一行完成什么。祝你好运

我对您的代码做了一些更改，并使其与jQuery一起工作，因为您将其包含在页面中

由于有多个复选框，

选中

需要在循环中的每个元素上进行测试

document.getElementsByName（“杂货店”）。选中的

出现了

未定义的

，然后您正在检查它是否为真，因此出现了

未捕获类型错误：无法读取未定义的

错误的属性“replace”

函数删除（）{
变量$inputs=$（'input'）；
$inputs.each（函数（）{
变量$input=$（此），
isChecked=$input.is（':checked'）；
如果（已检查）{
$input.parent（）.css（'text-decoration'，'line-through'）；
}否则{
$input.parent（）.css（'text-decoration'，'none'）；
}
});
}
$（'button'）。在（'click'，删除符号）上

购物清单


牛奶

黄油

蛋

奶酪

咖啡

提交
我对您的代码做了一些更改，并使其与jQuery一起工作，因为您将其包含在页面中
由于有多个复选框，选中
需要在循环中的每个元素上进行测试document.getElementsByName（“杂货店”）。选中的
出现了未定义的
，然后您正在检查它是否为真，因此出现了未捕获类型错误：无法读取未定义的
错误的属性“replace”

函数删除（）{
变量$inputs=$（'input'）；
$inputs.each（函数（）{
变量$input=$（此），
isChecked=$input.is（':checked'）；
如果（已检查）{
$input.parent（）.css（'text-decoration'，'line-through'）；
}否则{
$input.parent（）.css（'text-decoration'，'none'）；
}
});
}
$（'button'）。在（'click'，删除符号）上

购物清单


牛奶

黄油

蛋

奶酪

咖啡

提交
我已经更新了你的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");
  });
}

函数删除（）{
//把线穿过
$（“[name='screery']”）。每个（函数（）{
$（this.parent（）.css（“文本装饰”，“无”）
});
//取出选中的项目
var checkedbox=$（“[name='screery']：选中”）；
//将行添加到
checkedbox.each（函数（）{
$（this.parent（）.css（“文本装饰”、“行通过”）；
});
}
我已经更新了你的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");
  });
}

函数删除（）{
//把线穿过
$（“[name='screery']”）。每个（函数（）{
$（this.parent（）.css（“文本装饰”，“无”）
});
//取出选中的项目
var checkedbox=$（“[name='screery']：选中”）；
//将行添加到
checkedbox.each（函数（）{
$（this.parent（）.css（“文本装饰”、“行通过”）；
});
}
首先，选择器$（“checkedbox”）
意味着jQuery选择所有带有标记
的元素，这就是错误发生的原因。XD
然后。。。如果要在checbox change上更改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
        }
    });
});

这意味着事件处理程序将绑定到主体而不是每个元素。如果您的复选框是动态加载/创建的（例如使用ajax）。）
 首先，选择器$（“checkedbox”）
意味着jQuery选择所有带有标记
的元素，这就是错误发生的原因。XD
然后。。。如果要在checbox change上更改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
        }
    });
});

这意味着事件处理程序将绑定到主体而不是每个元素。如果您的复选框是动态加载/创建的（例如使用ajax）。）
 我只是通过在输入端使用伪选择器使它变小了。结果相同，您也可以在选中所有复选框后使用过滤器，例如

$（'input'）。过滤器（函数（索引）{
return$（this）.is（“：selected”）；
}).each（函数（{
$（this）.parent（）.css（“文本装饰”，“行通过”