在 div 内制作两个独占复选框

Question

我从this stack question关注了这个jsfddle

这是我的 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 以将点击的<input> 设置为true

我没有看到我的错误在哪里，欢迎任何帮助。

谢谢

更新

@Mohamed-优素福

好的，为了得到检查输入的数组，我做了：

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;
});

或

$('#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;
});

或

将 OTHER 复选框设为与此相反的复选框：（注意：使用此复选框不能“取消选中”两者。）

$('#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);

或

编辑：在这里，我们然后使用.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();

它是一组输入，而不仅仅是一个用于获取属性的输入。您可以在 .each 中使用它来获取每个复选框的属性

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