RoR jQuery检查/取消选中特定项目

我目前正在构建RoR网页。我正在尝试构建一个复选框，以帮助在选中时选择表单中的某些选项。当复选框未选中时，它将自动取消选中所选的选项。RoR jQuery检查/取消选中特定项目

例如：

 <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' name='checkanimal' onclick='checkAnimal()'><br> 
     </form>

和JavaScript：

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

在JavaScript中，而不if (checked == false){checked = true}else{checked = false}，选项（1,2,4,5）将在 “CheckAnimal” 点击时，可以选择复选框。但是，如果我将代码添加回来，该复选框将不起作用。

顺便说一下，这些代码只能在JSFiddle中工作，并且在我的本地环境中不起作用，我不知道为什么。

的jsfiddle：http://jsfiddle.net/yddq6/

的代码都在文件 “_form.html.erb” 和谷歌CDN（jQuery的1.10.2）<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head>）是.erb文件中。

请帮助！

来源

2013-12-20 TiHuan

非常感谢您解决我的问题，大家好！我希望我可以选择你们两个作为最佳答案。两种解决方案都可以完美地工作:)自从他早些时候发布他的解决方案以来，我“最好的回答”再次感谢您的一切。真的很感激它！ – TiHuan

你们知道为什么这些代码在我的本地环境中不起作用吗？我在http://0.0.0.0:3000/上使用chrome来测试函数，并且它只在JSFiddle中不起作用。代码在“_form.html.erb”中。感谢你的向导工作！ – TiHuan

为什么不设置两个不同的情况，为什么不将4个复选框设置为您尝试匹配的复选框的相同状态？

function checkAnimal() { 
var values = ['1', '2', '4', '5']; 
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", 
$("#checkAnimalCheckbox").prop("checked")); // Instead of true, pass the value of the CheckAnimal Checkbox 
}

并在您的HTML中添加一个ID以挑选特殊复选框。

<input type='checkbox'ID="checkAnimalCheckbox" name='checkanimal' onclick='checkAnimal()'>

这里有一个改装成的jsfiddle你：http://jsfiddle.net/yddq6/1/

来源

2013-12-20 02:05:33

这是因为在你的代码，没有定义checked，它应该是element.checked，你也应该元素传递给你的函数：

<input type='checkbox' name='checkanimal' onclick='checkAnimal(this)'> 

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

但我会用.on()和.filter()方法：

$('input[name="checkanimal"]').on('change', function() { 
    $("#list input").filter(function() { 
     return $.inArray(this.value, values) > -1; 
    }).prop("checked", this.checked); 
});

http://jsfiddle.net/yddq6/2/

来源

2013-12-20 02:08:08 undefined

RoR jQuery检查/取消选中特定项目

回答

相关问题