making two exclusive checkbox inside div

- 1 answer

Ad

I have followed this jsfddle from this stack question

Here's my HTML code :

<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>    

I did in 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);

  }

But I get the following error :

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

I try to access the <input> tag for setting true to the clicked <input>

I don't see where is my error, any help is welcome.

Thanks

UPDATE

@Mohamed-Yousef

ok now, to get the array of checked inputs, I did :

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

I get :

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

Sorry, I have not practiced Jquery a lot.

Ad

Answer

Ad

This entire thing can be simply:

NOT capturing the current state:

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

Un-check the other box no matter what the current checkbox state is:

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

OR

Make the OTHER checkbox the opposite of this one:(NOTE: both cannot be "unchecked" using this.)

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

EDIT: Note that this way, you can click the label as well as the checkbox which might enhance the user experience but you would need to decide that.

IF the syntax above is not desired you can also manage the property with jQuery as:

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

OR

EDIT: Here, we then use the .prop() to both get and set:

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

EDIT: here is another method using .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);
});
Ad
source: stackoverflow.com
Ad