目前，我有两个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周围的头部标签和表单周围的body标签，并且结果相同。 Check All正常运行，而Check Animal无效。
第三编辑：
阅读你们的建议后修改代码。不幸的是，它仍然无法正常工作。
<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显示未定义“检查动物”之后，我已删除了“检查动物”功能周围的
$(function() {。现在新的错误是：TypeError: $(...).find is not a function
...lue=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox...
新的“检查动物”代码可以简单地还原为原始代码：
<script language='JavaScript'>
function checkAnimal() {
var values = ['1', '2', '4', '5'];
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", true);
}
</script>
最佳答案
尝试这个：
$(function() {
function checkAnimal () {
var values = ['1', '2', '4', '5'];
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
}
});