如何使用 JQuery 根据另一组复选框检查一组复选框答案

【问题标题】：How to check a group of checkboxes based on another group of checkboxes with JQuery如何使用 JQuery 根据另一组复选框检查一组复选框
【发布时间】：2012-08-21 20:08:40
【问题描述】：

我在页面上有两个单独的表单，它们都有一组复选框。

<body>
   <form name="form1" id="form1" ...>
        <input type="checkbox" name="check1" value="Person"  />
        <input type="checkbox" name="check1" value="Dog"  />
        <input type="checkbox" name="check1" value="Cat"  />
   </form>
    <form name="form2" id="form2" ...>
        <input type="checkbox" name="check1" value="Person"  />
        <input type="checkbox" name="check1" value="Dog"  />
        <input type="checkbox" name="check1" value="Cat"  />
      </form>
  </body>

我需要的是，一旦用户选中/取消选中 form2 中的任何复选框，我想对 form1 中的相应复选框执行相同操作。如果用户在 form2 中选择了“dog”和“cat”，则自动为 form1 进行检查。我已经尝试了几件事，但我无法找到基于 value 字段设置选中属性的方法。

我能做的最好的事情是为所有复选框设置唯一的 id，并根据 id 选择/取消选择。但我正在尝试找出是否有更好的选择器方式。

另外，如果有人能建议我一个更好的方法来做我正在尝试的事情，我会很高兴。

--我还没有尝试过，但这是我打算做的--

   <form name="form1" id="form1" ...>
        <input type="checkbox" name="check1[]" id="form1_Person" value="Person"  />
        <input type="checkbox" name="check1[]" id="form1_Dog" value="Dog"  />
        <input type="checkbox" name="check1[]" id="form1_Cat" value="Cat"  />
   </form>
    <form name="form2" id="form2" ...>
        <input type="checkbox" name="check1[]" id="form2_Person" value="Person"  />
        <input type="checkbox" name="check1[]" id="form2_Person" value="Dog"  />
        <input type="checkbox" name="check1[]" id="form2_Person" value="Cat"  />
      </form>

单击 form2 复选框后，获取值，然后在 form1 中查找复选框。如果选择了狗，检查 $('#form1_'[dog]).checked('checked',checked)

【问题讨论】：

你能告诉我们你尝试了什么吗？我想你也想使用name="check1[]"，否则只会提交最后一个复选框。

标签： jquery checkbox

【解决方案1】：

你可以这样做

$('input[type=checkbox]').change(function(){ // <-- bind to all checkboxes
    var $this = $(this);
    var x = $this.index();  // store index
    var $otherForm = $('form').not($this.parent()); // need this to synch other form
    $otherForm.find('input').eq(x).prop('checked',this.checked); // change other forms checkbox accordingly
});

http://jsfiddle.net/wirey00/ewfrV/

【讨论】：

【解决方案2】：

你可以的

$('#form1').on('click', 'input:checkbox', function(e) {
    var checked = $(this).is(':checked');
    var val = this.value;
    $('#form2 input:checkbox[value=' + val + ']').prop('checked', checked);
})

在这里摆弄http://jsfiddle.net/gpsax/

【讨论】：

美女.. 非常感谢！一旦 6 分钟限制到期，我将接受答案 :)
这只适用于一种方式。如果您从表格 2 中选择，它不会检查表格 1
@wirey 我以为他是这样问的 :)
once form2 checkbox is clicked, get the value, and look for checkbox in form1. If dog is selected, check $('#form1_'[dog]).checked('checked',checked) 好吧.. 我猜你的正好相反..

【解决方案3】：

一种方式：

$('#form2 input[type="checkbox"]').change(function() {
    var val = $(this).val();
    $('#form1 [value="' + val + '"]').prop('checked', this.checked);
});

两种方式：

$('form input[type="checkbox"]').change(function() {
    var $element = $(this);
    var $form = $element.parent('#form1').length ? $('#form2') : $('#form1');
    var val = $element.val();
    $('[value="' + val + '"]', $form).prop('checked', this.checked);
});

demo

【讨论】：