目前我有两个 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 tads 和表单周围的 body 标签，它给出了相同的结果。勾选所有作品并勾选动物不作品。
第三次编辑:
在阅读了你们的建议后修改了代码。不幸的是，它仍然不起作用..很有趣!
<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>
最佳答案
试试这个:
$(function() {
function checkAnimal () {
var values = ['1', '2', '4', '5'];
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
}
});
关于javascript - jQuery 在 JSFiddle 中有效但在本地 RoR 环境中无效？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20695559/