We Keep Coding

Exclusive input checkboxes - enable to uncheck by clicking on current checked input

I did an exclusive menu of 2 input checkboxes : each input checkbox corresponds to a different case : (Player Vs Computer) and (Player1 Vs Player2) and each case is associated to 2 buttons (which work as I want).
My issue is that I would like to add a functionality, i.e enable to uncheck the current checked box by clicking on the current checkbox (this one which is already checked).
For the moment, I have to click directly on the other input checkbox to uncheck the current one; I would like to get the both functionalities.
Here's the current code which handles these 2 exclusive input checkbox :
// Check input checked
checkBoxState = $('#'+gameType+'').find('.game').prop('checked');
// Set oneButtonClicked to no for restore
$('#formGame').prop('oneButtonClicked', 'no');
// Handling input.game
$('#'+gameType+'').find('.game').prop('checked', !checkBoxState);
//$('#'+gameType+'').siblings().find('.game').prop('checked', checkBoxState);
// Set pointer-events to all for formGame
$('#formGame').css('pointer-events', 'all');
// Handling button.btn
$('#'+gameType+'').find('.btn').css('pointer-events', 'none');
$('#'+gameType+'').siblings().find('.btn').css('pointer-events', 'all');
$('#'+gameType+'').find('.btn').prop('disabled', checkBoxState);
$('#'+gameType+'').siblings().find('.btn').prop('disabled', !checkBoxState);
gameType is the current type of game (Player Vs Computer or Player1 Vs Player2).
input.game represent the input checkboxes
button.btnrepresent the 2 buttons available for each ìnput.game.
How can I add this functionality, i.e uncheck by clicking on current checked, or uncheck by clicking directly on the other checkbox?
Update 1
A click on a checkbox should automatically set its negation to the other checkbox.
Update 2
I tried to adapt the solution given by #CodeAt30 by doing simply:
gameType = (gameType == 'PlayerVsComputer') ? 'Player1VsPlayer2' : 'PlayerVsComputer';
$('#'+gameType).find('.game').prop('checked', !$('#'+gameType).find('.game').prop('checked'));
This solution works for uncheck the current checkbox and check its siblings().
But now, I can't select directly the other checkbox unlike to the JS Fiddle: Uncheck checkbox by clicking directly on the other no-checked "input checkbow"

https://jsfiddle.net/m059rr88/
HTML
<input id="one" type="checkbox"></input>
<input id="two" type="checkbox"></input>
Javascript:
let afterFirstClick = false;
$("input").click(function(){
let passiveCheckboxId = "one";
if($(this).attr("id") === "one"){
passiveCheckboxId = "two"
}
if(afterFirstClick){
$("input#" + passiveCheckboxId).prop("checked", !$("input#" + passiveCheckboxId).prop("checked"));
}
afterFirstClick = true;
});

Easier than you might think:
$('input.game').click(function(){
$('input.game').not(this).removeAttr('checked');
});
What is does is assign a click handler to the checkboxes that removes the checked attribute from all other boxes. The status of the current box is handled by the native checkbox code, so checking and unchecking will work normally.
... or ...
$('input.game').click(function(){
if (this.checked) {
$('input.game').not(this).removeAttr('checked');
} else {
$('input.game').not(this).trigger('click');
}
});
This code will allow you to swap checkboxes by clicking on either one. Once a box is checked there is no way to uncheck it, like a radio button.

Only one checbox checked with possibility check checkbox by div

I have several checkboxs on site. This checkboxs can be check by div too, but only one checkbox can be check at a time. That is the problem. When I want click on checbox by div - it works.
When I want only one checbox checked at a time - it works. But when I want both functions at once - it doesn't.
So here is code (for example):
<div class="sth">
<input type="checkbox" class="myCheck"><label>blabla</label>
</div>
<div class="sth">
<input type="checkbox" class="myCheck"><label>blabla</label>
</div>
<div class="sth">
<input type="checkbox" class="myCheck"><label>blabla</label>
</div>
And jQuery:
$("div.sth").on("click",function(event) {
var target = $(event.target);
if (target.is('input:checkbox')) return;
var checkbox = $(this).find("input[type='checkbox']");
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
} else {
checkbox.prop("checked",false);
}
});
$('input:checkbox').on('change', function() {
$('input:checkbox').not(this).prop('checked', false);
});

Updated fiddle.
You should add the following line :
$('input:checkbox').not(this).prop('checked', false);
In your "div.sth" click event to uncheck the other checkboxes first then select the one related with clicked div.
Hope this helps.

Have you considered using radio buttons instead and just styling them with CSS to look however you want?
Otherwise use the other answer, mine second portion of this was me misunderstanding the goal.

3 checkboxes 1 is independent of the other need jquery to not look at the 1st one as part of collection

I had written a question in which the answer DID satisfy the business requirement until they changed their minds.
Uncheck checkbox if checked with jquery
This code worked awesome
$('input[type="checkbox"]').on('change', function () {
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false);
});
This code above DID satisfy the business at the time.
Must only allow for 1 of the 3 boxes to be checked. Out, Yes, No
Must allow for a second click on a checkbox to uncheck it so that NO checkboxes are selected.
As mentioned the above code worked great for the requirement!
HOWEVER, it is now said that OUT is separate from YES and NO
<table>
<tr>
<td>
<input id="GridView1__ctl2_chkOut" type="checkbox" name="GridView1:_ctl2:chkOut" checked="checked">
</td>
<td>
<input id="GridView1__ctl2_chkYes2" type="checkbox" name="GridView1:_ctl2:chkYes2">
</td>
<td>
<input id="GridView1__ctl2_chkNo2" type="checkbox" name="GridView1:_ctl2:chkNo2">
</td>
</tr>
</table>
So of the 3 checkboxes rules are
Still can uncheck a box if selected.
Out (first checkbox) is independent of 2nd and 3rd YES and NO
Can Check 1st box and 2nd box , OR check 2nd box and 3rd box
So now when I look at this jquery
$('input[type="checkbox"]').on('change', function () {
// if checkbox equals ^Out ... Do allow for it to be checked if
//the yes or no is checked , and if checked, toggle to unchecked if clicked on
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false);
});
Seems that the logic can now get complicated with the fact of not simply being able to just look at closest checkbox in next tr tag..

You could add a class or id to each of your checkboxes (class if you have multiple rows) and then have two change functions that achieve your results:
https://jsfiddle.net/1ad3Lupw/
$('.no').on('change', function () {
$(this).closest('tr').find('.out').not(this).prop('checked', false);
});
$('.out').on('change', function () {
$(this).closest('tr').find('.no').not(this).prop('checked', false);
});
In the above example, the out and yes checkbox can be checked together or the yes and no can be checked together per your requirements. You can uncheck any of the three as well.

How to set unchecked checkbox 1 When checkbox 2 was checked and set unchecked checkbox 2 When checkbox 1 was checked using script?

How to set unchecked checkbox 1 When checkbox 2 was checked and set unchecked checkbox 2 When checkbox 1 was checked
( Make checkbox working like radio button. )
<input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1"/> checkbox 1
<br>
<input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox2"/> checkbox2
<script type="text/javascript">
document.getElementById('checkbox1').onchange = function() {
document.getElementById('checkbox2').Unchecked = this.checked;
};
</script>
<script type="text/javascript">
document.getElementById('checkbox2').onchange = function() {
document.getElementById('checkbox1').Unchecked = this.checked;
};
</script>

You need to use .checked and not unchecked and set its property to false
document.getElementById('checkbox2').checked = false;
FIDDLE

With jQuery -
$('input:checkbox').on('change',function(){
if(this.checked)
$(this).siblings('input:checkbox').prop('checked',false);
});
Demo ---> http://jsfiddle.net/3g67r/

Your best option is to use the right input type for the job.
Check boxes allow multiple selections while radio buttons do not. Users should expect them to work like that and would get confused if check boxes worked like radio buttons (I know I would get confused.)
Use the right input and forget about overriding functionality with javascript. (Don't forget, they could have javascript turned off which would potentially cause you problems that using the right input would prevent)

How do I allow to check only one checkbox out of four in UserControl?

I have created a User Control with 4 check boxes(server control). I want to allow to check only one checkbox out of four.
The user control is loaded on page dynamically.I page may have multiple same UserConrol.
How do I do it using jQuery or Javascript?

Use a Radio Button Control. Checkboxes are meant for multiple selections, whereas Radio Buttons are meant for single selections. Then with the Radio Buttons you can specify the GroupName for those controls to limit the selection to a single item.

You can give all of the checkboxes in the group the same class and do something like this to uncheck them all using JQuery, while checking or unchecking the one that was clicked:
$('.checkbox').click(function{
// save the original checked state of the one we're clicking:
var checked = $(this).attr('checked');
$('.checkbox').attr('checked', false); // uncheck all of the boxes
$(this).attr('checked', !checked); // invert the original state
});
But the better choice would probably be to use a radio button control with a "none of the above" option. That way you can do validation (did they answer the question at all?)

I think it should be: $(this).attr('checked', checked);

Had similar issue when working on cakephp. Cakephp wraps checkboxes within DIV.
My solution was clear checkboxes using each loop and then select the checkbox user ticked.
CASE:
<div class="unique"> <input type='checkbox' name='mygroup1' value='1' class=''>one</div>
<div class="unique"> <input type='checkbox' name='mygroup2' value='2' class=''>two</div>
<div class="unique"> <input type='checkbox' name='mygroup3' value='3' class=''>three</div>
$('.unique').click(function() {
$('.unique').find('input').each(function(){
$(this).attr('checked', false);
});
$(this).find('input:first').attr('checked', true);
});