Question

目前我有两个JavaScript函数。 “全部检查”功能在JSFiddle和本地环境(http://0.0.0.0:3000)中都能很好地工作。但是，“选择动物”或仅选择表单中特定选项的功能仅适用于JSFiddle，但不适用于本地环境。我想知道是什么导致了这个问题。

以下是我的“_form.html.erb”中的代码：

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>

    <script language='JavaScript'>
          checked = false;
          function checkedAll () {
            if (checked == false){checked = true}else{checked = false}
            for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
          document.getElementById('myform').elements[i].checked = checked;
        }
          }
    </script>

    <body>
        <form id="myform">
        Foo1<input type="checkbox" name="foo1"/>
        Bar2<input type="checkbox" name="bar2"/>
        Rah3<input type="checkbox" name="rah3"/>
        Check all: <input type='checkbox' name='checkall' onclick='checkedAll()'>
        </form>
    </body>

    <script language='JavaScript'>
        function checkAnimal () {
            var values = ['1', '2', '4', '5'];
            $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
                     }   
    </script>

    <body>
        <form id='list'><br>
        1<input type='checkbox' value='1' />
        2<input type='checkbox' value='2' />
        3<input type='checkbox' value='3' />
        4<input type='checkbox' value='4' />
        5<input type='checkbox' value='5' />
        CheckAnimal<input type='checkbox' ID="checkAnimalCheckbox" name='checkthese' onclick='checkAnimal()'><br>
        </form>
   </body>

编辑：

我已将代码更改为以下内容：

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>


<script language='JavaScript'>
  checked = false;
  function checkedAll () {
    if (checked == false){checked = true}else{checked = false}
    for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
  document.getElementById('myform').elements[i].checked = checked;
}
  }
</script>

<script language='JavaScript'>
    function checkAnimal () {
        var values = ['1', '2', '4', '5'];
        $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));

             }   
</script>

<body>

<form id="myform">
Foo1<input type="checkbox" name="foo1"/>
Bar2<input type="checkbox" name="bar2"/>
Rah3<input type="checkbox" name="rah3"/>
Check all: <input type='checkbox' name='checkall' onclick='checkedAll()'>
</form>

<form id='list'><br>
1<input type='checkbox' value='1' />
2<input type='checkbox' value='2' />
3<input type='checkbox' value='3' />
4<input type='checkbox' value='4' />
5<input type='checkbox' value='5' />
CheckAnimal<input type='checkbox' ID="checkAnimalCheckbox" name='checkanimal' onclick='checkAnimal()'><br>
</form>

</body>

“全部检查”功能运行良好，“检查动物”仍然无效：/

第二次编辑：

我还试过去除jquery.min.js周围的头部潮流和表格周围的身体标签，它给出了相同的结果。检查所有工作和检查动物没有。

第三次编辑：

在阅读了你们的建议后修改了代码。不幸的是，它仍然无法工作..非常有趣！

    <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script language='JavaScript'>
      checked = false;
      function checkedAll () {
        if (checked == false){checked = true}else{checked = false}
        for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
      document.getElementById('myform').elements[i].checked = checked;
      }
      }
    </script>

    <script language='JavaScript'>
        $(function() {
        function checkAnimal () {
        var values = ['1', '2', '4', '5'];
        $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
        }
        }); 
    </script>

    </head>

    <body>

    <form id="myform">
    Foo1<input type="checkbox" name="foo1"/>
    Bar2<input type="checkbox" name="bar2"/>
    Rah3<input type="checkbox" name="rah3"/>
    Check all: <input type='checkbox' name='checkall' onclick='checkedAll()'>
    </form>

    <form id='list'><br>
    1<input type='checkbox' value='1' />
    2<input type='checkbox' value='2' />
    3<input type='checkbox' value='3' />
    4<input type='checkbox' value='4' />
    5<input type='checkbox' value='5' />
    CheckAnimal<input type='checkbox' ID="checkAnimalCheckbox" name='checkanimal' onclick='checkAnimal()'><br>
    </form>

   </body>

编辑4：

在Firebug显示“Check Animal”未定义后，我在“Check Animal”功能周围删除了$(function() {。现在新的错误是：

TypeError: $(...).find is not a function

...lue=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox...

新的“Check Animal”代码简单地反转回原始代码：

<script language='JavaScript'>
function checkAnimal() {
var values = ['1', '2', '4', '5'];
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", true);

}
</script>

Answer 1

试试这个：

$(function() {
  function checkAnimal () {
    var values = ['1', '2', '4', '5'];
    $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
  }
});

Answer 2

我找到了解决方案！

非常感谢你的帮助。没有你，我不会想到这一点。

解决方案是将代码中的“$”更改为函数“checkAnimal”的“jQuery”，如下所示：

<script language='JavaScript'>
                function checkAnimal () {
                var values = ['1', '2', '4', '5'];
                jQuery("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", jQuery("#checkAnimalCheckbox").prop("checked"));

                 } 
</script>

节日快乐，大家好！

jQuery在JSFiddle中工作但在本地RoR环境中不起作用？

2 个答案: