我在页面上有两个单独的表单,它们都有一组复选框。
<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的相同内容。我尝试了几件事,但我无法找到根据值字段设置checked属性的方法。
我唯一能做的就是为所有复选框设置唯一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])。勾选('勾选',勾选)
答案 0 :(得分:1)
你可以做到
$('#form1').on('click', 'input:checkbox', function(e) {
var checked = $(this).is(':checked');
var val = this.value;
$('#form2 input:checkbox[value=' + val + ']').prop('checked', checked);
})
答案 1 :(得分:1)
单程:
$('#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);
});
答案 2 :(得分: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
});