Question

这是我的HTML代码：

<div id="paramStart">
    <div id="gameType">
    <div id="UserVsComputer" class="checkbox" style="margin-left: 8px;">                 
      <label><input type="checkbox" value="">User vs Computer</label>                    
    </div>
    <br>                                                                                 
    <br>
    <div id="User1VsUser2" class="checkbox" style="margin-left: 8px;">                   
      <label><input type="checkbox" value="">User1 vs User2</label>                      
    </div>                                                                               
</div>

我在Javascript中做过：

var gameType = document.getElementById('gameType');

gameType.addEventListener('click', setGameType, false);

function setGameType() {

  var checkInput = $('#gameType .checkbox > label > input');
  console.log(checkInput);
  checkedState = checkInput.attr('checked');
  checkInput.attr('checked').each(function () {
      $(this).attr('checked', false);
  }); 
  checkInput.attr('checked', checkedState);

  }

但是我收到以下错误：

TypeError: checkInput.attr(...) is undefined

我尝试访问<input> tag，将true设置为点击的<input>

我不知道我的错误在哪里，欢迎任何帮助。

由于

更新

@ Mohamed-Yousef

现在好了，为了获得已检查输入的数组，我做了：

var checkInput = $('#gameType > div > input[type="checkbox"]');
console.log(checkInput.attr());

我明白了：

TypeError: a is undefined jquery-latest.min.js:4:9978

抱歉，我没有经常练习Jquery。

Answer 1

这一切都可以简单地说：

不捕捉当前状态：

$('#gameType').on('click','.checkbox',function(){
    $(this).siblings().find('input[type="checkbox"]')[0].checked = false;
});

OR

$('#gameType').on('click','.checkbox',function(){
    $(this).siblings().find('input[type="checkbox"]').prop('checked', false);
});

无论当前的复选框状态如何，都取消选中其他框：

$('#gameType').on('click','.checkbox',function(){
    var checkBoxState = $(this).find('input[type="checkbox"]')[0].checked;
    $(this).siblings().find('input[type="checkbox"]')[0].checked = false;
});

OR

使OTHER复选框与此对话框相反:(注意：两者都不能＆＃34;未选中＆＃34;使用此复选框。）

$('#gameType').on('click','.checkbox',function(){
    var checkBoxState = $(this).find('input[type="checkbox"]')[0].checked;
    console.log(checkBoxState);
    $(this).siblings().find('input[type="checkbox"]')[0].checked = !checkBoxState;
});

编辑：请注意，通过这种方式，您可以点击标签以及可能增强用户体验的复选框，但您需要确定。

如果不需要上面的语法，您还可以使用jQuery管理属性：

$(this).siblings().find('input[type="checkbox"]').prop("checked", false);

OR

编辑：在这里，我们然后使用.prop()来获取和设置：

$('#gameType').on('click','.checkbox',function(){
    var checkBoxState = $(this).find('input[type="checkbox"]').prop("checked");
    console.log(checkBoxState);
    $(this).siblings().find('input[type="checkbox"]').prop("checked", checkBoxState);
});

编辑：这是使用.is()

的另一种方法

$('#gameType').on('click','.checkbox',function(){
    var checkBoxState = $(this).find('input[type="checkbox"]').is(":checked");
    console.log(checkBoxState);
    $(this).siblings().find('input[type="checkbox"]').prop("checked", checkBoxState);
});

Answer 2

直到您的html结构，您可以在用户选中复选框并取消选中其他复选框时更改游戏类型

var gameType = $('input[type="checkbox"]');

gameType.on('click', function(){
   setGameType($(this));
});

function setGameType(el) {
  if(el.is(':checked')){
    $('input[type="checkbox"]').not(el).prop('checked' , false);
  }
}

Working Demo

关于你的代码

$('#gameType .checkbox > label > input').attr();

它的输入数组不仅仅是一个输入来获取attr ...你可以在.each中使用它来获取每个复选框的attr使用

checkInput.each(function () {
     alert( $(this).attr('checked'));
  });

在div

2 个答案: