如果选中另一个复选框，则选中复选框答案

【问题标题】：check checkbox if another checkbox is checked如果选中另一个复选框，则选中复选框
【发布时间】：2014-01-27 04:03:00
【问题描述】：

如果选中值为 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;

【问题讨论】：

你应该给不同的元素不同的id。
不能与多个元素共享同一个ID！！！

标签： javascript jquery checkbox

【解决方案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);
});

id 是唯一的，您应该改用 class。
chk1 和 chk2 的选择器错误，请像上面一样使用 ' 正确连接。
使用 change() 函数检测第一个复选框何时选中或取消选中，然后使用 prop() 更改第二个复选框的选中状态。

Fiddle Demo

【讨论】：

【解决方案2】：

Id 应该是唯一的，以便为您的元素设置不同的ids，顺便说一下您必须使用.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);
});

【讨论】：

@downvoter，你能提供你投反对票的原因吗？我在这里错过了什么吗？谢谢。

【解决方案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 为何不好的更多信息，请参阅：Why is it a bad thing to have multiple HTML elements with the same id attribute?

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

等等，你把帖子编辑成一模一样的东西？是否仍然需要进行编辑？
我刚刚格式化了你的答案。如果您想忽略它，可以将其还原。
好的，谢谢。我以为您可能想添加，但错过了

【解决方案5】：

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

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


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

【讨论】：

在你的情况下，而不是 select_all 让你的 id=username