Question

我有两种形式：

FOO：

<form id="foo_form" method="post" action="foo">
  <input class="foo checkbox" id="foo_select_1" name="ids[]" type="checkbox" value="1" />
  <input class="foo checkbox" id="foo_select_2" name="ids[]" type="checkbox" value="2" />
  <input class="foo checkbox" id="foo_select_3" name="ids[]" type="checkbox" value="3" />
  ...
  <input type="submit" value="action 1" />
</form>

栏：

<form id="bar_form" method="post" action="bar">
  <input class="bar checkbox" id="bar_select_1" name="ids[]" type="checkbox" value="1" />
  <input class="bar checkbox" id="bar_select_2" name="ids[]" type="checkbox" value="2" />
  <input class="bar checkbox" id="bar_select_3" name="ids[]" type="checkbox" value="3" />
  ...
  # some other input fileds here
  <input type="submit" value="action 2" />
</form>

我需要JS（jQuery），foo的每次更改复选框都会更改bar处的相应复选框。

主要目标是为相同的复选框设置2个不同的操作。我想隐藏bar处的CSS，只留下提交按钮。全部描述为here

Answer 1

这样做：

<强> Fiddle

$(document).ready(function(){
    $('#foo_form input:checkbox').change(function(){
       $('#bar_' + this.id.replace('foo_', '')).prop('checked', this.checked); 
    });
});

Answer 2

这似乎是一件非常奇怪的事情。您是否只需要在选中复选框时从#bar_form表单获取当前值的副本？如果是这样，我会考虑使用数据$('#foo_form').serializeArray()在更改事件后为您提供。

$('#foo_form').on('change', function () {
  var $form = $(this);
  console.table($form.serializeArray());
});

将复选框标记复制到另一个表单

2 个答案: