如果另一个复选框被选中，请勾选复选框。

Question

如果值为1的复选框被选中，我希望值为2的复选框自动被选中。由于两个复选框具有相同的id，因此无法使用getElementById。

html：

<input type="checkbox" value="1" id="user_name">1<br>
<input type="checkbox" value="2" id="user_name">2

我感到疲倦:

var chk1 = $("input[type="checkbox"][value="1"]");
var chk2 = $("input[type="checkbox"][value="2"]");

if (chk1:checked)
      chk2.checked = true;

- anmaree

---

应该给不同的元素分配不同的 ID。 - Rajaprabhu Aravindasamy

不能将同一个ID分配给多个元素！！！ - M Reza Saberi

Answer 1

您需要将您的HTML和jQuery更改为以下内容：

var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");

chk1.on('change', function(){
    chk2.prop('checked',this.checked);
});

1. id是独一无二的，你应该使用class。

2. 你的chk1和chk2选择器写错了，应该像上面那样正确地连接它们。

3. 使用change()函数检测第一个复选框是否被选中或取消选中，然后使用prop()更改第二个复选框的选中状态。

演示代码

- Felix

Answer 2

Id 应该是唯一的，因此将不同的 id 分配给您的元素。顺便提一下，您需要使用 .change() 事件来实现您想要的效果。

尝试一下：

HTML：

<input type="checkbox" value="1" id="user_name1">1<br>
<input type="checkbox" value="2" id="user_name2">2

JS：

var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");

chk1.change(function(){
  chk2.prop('checked',this.checked);
});

- Rajaprabhu Aravindasamy

---

@downvoter，您能否提供下降投票的原因？我在这里有什么遗漏吗？谢谢。 - Rajaprabhu Aravindasamy

Answer 3

您需要更改其中一个ID。这不符合W3C标准（因此是类与ID的区别）。jQuery只会处理第一个ID，但大多数主流浏览器会将ID视为类，因为它们知道开发人员会犯错误。

解决方案：

<input type="checkbox" value="1" id="user_name">1<br>
<input type="checkbox" value="2" id="user_name_2">2

使用这个JS：

var chk1 = $('#user_name');
var chk2 = $('#user_name2');

//check the other box
chk1.on('click', function(){
  if( chk1.is(':checked') ) {
    chk2.attr('checked', true);
  } else {
    chk2.attr('checked', false);
  }
});

了解为什么使用ID是不好的，请参阅此处：为什么在多个HTML元素中使用相同的id属性是一件坏事？

- wharding28

Answer 4

错误可能出现在这里："input[type="checkbox"]。在这里，复选框不在引号内，因此您的查询正在查找input[type=][value=1]。

将其更改为"input[type='checkbox']（在双引号内使用单引号，尽管您不需要引用复选框）。

http://api.jquery.com/checked-selector/

- Palash

---

等等，你编辑了帖子，但是内容完全没有变化？那个编辑真的有必要吗？ - Palash

我刚刚格式化了你的回答。如果你想忽略它，可以将其恢复。 - Rajaprabhu Aravindasamy

好的，谢谢。我以为你可能想添加什么，但是错过了。 - Palash

Answer 5

首先创建一个输入类型为复选框：

   <input type='checkbox' id='select_all'/>   


   $('#select_all').click(function(event) {   
            if(this.checked) {
               $(':checkbox').each(function() {
                this.checked = true;                        
              });
            }
           });

- amit_183

---

在你的情况下，不要使用“select_all”，而是使用你的ID=username。 - amit_183