Check only one checkbox and unchek others

Question

Im trying to check only one checkbox at the time and others uncheck , but when i want to check new chekcbox then pervious will uncheck and so on.

i tried this code:

JS file

$('input[type="checkbox"]').click(function() {
$(".check_class").attr("checked", false);
$(this).attr("checked", true);    
});

HTML file

    <ons-list-header>Takistused</ons-list-header>
    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item">
        <input type="checkbox" id="example">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        vihmaveerenn
      </label>
    </ons-list-item>
    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item" id="test">
        <input type="checkbox" id="example">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark" ></div>
        äärekivi
      </label>
    </ons-list-item>
    <ons-list-item modifier="tappable" >
      <label class="checkbox checkbox--noborder checkbox--list-item" id="test1">
        <input type="checkbox" id="example">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        munakivi tee
      </label>
    </ons-list-item>
  </ons-list>

What im doing wrong? i have tried different approaches, but it just wont work in live use.

Why not just use radio buttons? That's what they are for :) (you can always style them to look like checkboxes if you insist) — iCollect.it Ltd, Apr 16 '15 at 13:21
Please note your example is invalid HTML as you have duplicate IDs — iCollect.it Ltd, Apr 16 '15 at 13:22
You need to use radio buttons, this is what they are made for. — Mark, Apr 16 '15 at 13:33
TrueBlueAussie , i appreciate your help, and your questin was the best couse u mentioned that i must be use radio buttons instead of checkboxes :) — DELION, Apr 16 '15 at 14:20
Glad you liked it, so why did you select the other, later, answer? — iCollect.it Ltd, Apr 16 '15 at 14:35
couse you are smart and know everithing but we need to aprove these guys do , who are just beginners in here, and they try to help. ;) — DELION, Apr 16 '15 at 20:17

kapantzak · Accepted Answer · 2015-04-16T13:32:17.450

24

Try the .not(this) like bellow:

$(document).on('click', 'input[type="checkbox"]', function() {      
    $('input[type="checkbox"]').not(this).prop('checked', false);      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="one" />
<input type="checkbox" id="two" />
<input type="checkbox" id="three" />
<input type="checkbox" id="four" />

edited Apr 16 '15 at 13:32

answered Apr 16 '15 at 13:24

kapantzak

11,610
4
39
61

TNX :) for help, i have forgotten html id rules :) – DELION Apr 16 '15 at 13:28
It would be better if you used radios as @TrueBlueAussie says – kapantzak Apr 16 '15 at 13:30
Also note: the `if` check here is not needed as it cannot be in a state where that could matter. – iCollect.it Ltd Apr 16 '15 at 13:31

iCollect.it Ltd · Answer 2 · 2015-04-16T13:36:53.753

You should really use radio buttons for this type of functionality, however you can simply exclude an item from a set of matches with not like this:

$('input[type="checkbox"]').click(function() {
   $('input[type="checkbox"]').not(this).prop("checked", false);
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/4n2e31oq/

Note you need to use prop and not attr for certain properties like checked.

You can make this a little more efficient by caching the selection of checkboxes:

var $checks = $('input[type="checkbox"]');
$checks.click(function() {
   $checks.not(this).prop("checked", false);
});

http://jsfiddle.net/TrueBlueAussie/4n2e31oq/1/

score 0 · Answer 3 · edited Dec 15 '15 at 20:45

0

 $(function () {
        $('input[type=checkbox]').click(function () {
             var chkBox = document.getElementById('<%= chkBranchRoleTransaction.ClientID %>');
            var chks = chkBox.getElementsByTagName('INPUT');
             for (i = 0; i < chks.length; i++) {
                 chks[i].checked = false;
             }
             $(this)[0].checked = true;
         });
    });

edited Dec 15 '15 at 20:45

Rick Smith

9,031
15
81
85

answered Dec 15 '15 at 20:27

Bhanu Pratap

1,635
17
17

Please edit with more information. Code-only and "try this" answers are [discouraged](http://meta.stackexchange.com/questions/196187/is-try-this-bad-practice), because they contain no searchable content, and don't explain why someone should "try this". – Rick Smith Dec 15 '15 at 20:46

score -1 · Answer 4 · answered Oct 18 '20 at 10:55

If you want to do this using class. You have add class and remove except current element.

jQuery(document).on('click', '.esg-filterbutton', function() { 
    jQuery(this).addClass('selected');     
    jQuery('.esg-filterbutton').not(this).removeClass('selected');  
});

Check only one checkbox and unchek others

4 Answers4