CODEWITHSUNDEEP
javascriptjqueryhtml
user1773603
user1773603

Reputation:

Making two exclusive checkbox inside div

I have followed this JS Fiddle from this 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>

Where is my error?

Update

@Mohamed-Yousef

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

Upvotes: 3

Views: 1035

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

up to your html structure you can change the game type when user checked the checkbox and unchecked another one

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

and about your code

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

Its an array of inputs not just one input to get attr for.. You can use it inside .each to get attr for each checkbox by using

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

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34178

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

Upvotes: 1

Related Questions