Question

我目前正在构建一个RoR网页。我正在尝试构建一个复选框，以便在选中时帮助选择表单中的某些选项。如果取消选中该复选框，它将自动取消选中所选的选项。

例如：

        <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}，则在单击“CheckAnimal”复选框时将选择选项（1,2,4,5）。但是，如果我重新添加代码，则复选框根本不起作用。

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

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

代码全部位于文档“_form.html.erb”中，Google CDN（jQuery 1.10.2）<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head>）也位于.erb文件中。

请帮忙！

Answer 1

为什么不将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/

Answer 2

这是因为在您的代码中，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/

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

2 个答案: