javascript 如果选中另一个复选框,则选中复选框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21372829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 20:45:31  来源:igfitidea点击:

check checkbox if another checkbox is checked

javascriptjquerycheckbox

提问by anmaree

I want the checkbox with the value 2 to automatically get checked if the checkbox with the value 1 is checked. Both have the same id so I can't use getElementById.

如果选中值为 1 的复选框,我希望自动选中值为 2 的复选框。两者都有相同的 ID,所以我不能使用 getElementById。

html:

html:

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

I tired:

我累了:

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

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

回答by Felix

You need to change your HTML and jQuery to this:

您需要将您的 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. idis unique, you should use class instead.

  2. Your selector for chk1and chk2is wrong, concatenate it properly using 'like above.

  3. Use change()function to detect when first checkbox checked or unchecked then change the checked state for second checkbox using prop().

  1. id是独一无二的,您应该使用 class 代替。

  2. 您的chk1和选择器chk2是错误的,请使用'上面的方法正确连接它。

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

Fiddle Demo

小提琴演示

回答by Maxzeroedge

The error is probably coming here "input[type="checkbox"]Here your checkbox is out of the quotes, so you query is looking for input[type=][value=1]

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

Change it to "input[type='checkbox'](Use single quote inside double quote, though you don't need to quote checkbox)

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

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

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

回答by wharding28

You need to change the ID of one. It is not allowed by W3C standard (hence classes vs ID's). jQuery will only process the first ID, but most major browsers will treat ID's similar to classes since they know developers mess up.

您需要更改其中一个的 ID。W3C 标准不允许这样做(因此是类与 ID)。jQuery 只会处理第一个 ID,但大多数主要浏览器会将 ID 视为类,因为他们知道开发人员会搞砸。

Solution:

解决方案:

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

With this JS:

有了这个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);
  }
});

For more information on why it's bad to use ID's see this: Why is it a bad thing to have multiple HTML elements with the same id attribute?

有关为什么使用 ID 不好的更多信息,请参见:为什么具有多个具有相同 id 属性的 HTML 元素是一件坏事?

回答by amit_183

first create an input type checkbox:

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

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


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

回答by Rajaprabhu Aravindasamy

Idshould be unique, so that set different idsto your elements, By the way you have to use .change()event to achieve what you want.

Id应该是唯一的,以便设置与ids您的元素不同,顺便说一下,您必须使用.change()事件来实现您想要的。

Try,

尝试,

HTML:

HTML:

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

JS:

JS:

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

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