how to select one check box and uncheck other in one time using js

Question

This is my code. Here I have given class name same for both the input check box:

$(document).ready(function() {
  $(document).on('change', ".check_class", function() {
    $(".check_class").attr("checked", false); //uncheck all checkboxes
    $(this).attr("checked", true); //check the clicked one
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row  m-t-10 m-l-5">
  <div class="form-group row">
    <div class="col-sm-4">
      <label class="checkbox-inline">  
        <input type="checkbox" class="check_class"  value="is_email" name="is_email">
        Email send?
      </label>
    </div>
    <div class="col-sm-4">
      <label class="checkbox-inline"> 
        <input type="checkbox" class="check_class"  value="is_sms" name="is_sms">
        Sms send?
      </label>
    </div>
  </div>
</div>

I tried a lot but its still not working. Any mistakes. Thank you.

If only one of these checkboxes should be checked at a single time, just use a radio button - it's exactly what they were designed for. — Rory McCrossan, Aug 31 '17 at 10:23

Alive to die - Anant · Accepted Answer · 2021-03-15T09:29:38.167

You code will work fine if you use .prop() instead of .attr() like below:-

$(document).ready(function() {
  $(document).on('change', ".check_class", function () {
    $(".check_class").prop("checked", false);
    $(this).prop("checked", true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row  m-t-10 m-l-5">
    <div class="form-group row">
        <div class="col-sm-4">
        <label class="checkbox-inline">  <input type="checkbox" class="check_class"  value="is_email" name="is_email">Email send?</label>
    </div>
    <div class="col-sm-4">
        <label class="checkbox-inline"> <input type="checkbox" class="check_class"  value="is_sms" name="is_sms">Sms send?</label> 
    </div>
    </div>
</div>

Note:- You can go for radio button, because they are specially designed to handle above scenario.

Reference:- why .attr() not worked but .prop() worked

score 1 · Answer 2 · edited Aug 31 '17 at 11:22

1

$(document).on('change', ".check_class", function () {
         $(".check_class").each(function(index,element){
                  element.attr("checked", false);
         }); //uncheck all check-boxes

});

edited Aug 31 '17 at 11:22

Alive to die - Anant

70,531
10
51
98

answered Aug 31 '17 at 10:27

Nadeem Shaikh

362
5
23

score 1 · Answer 3 · answered Aug 31 '17 at 10:29

If only one of these checkboxes should be checked at a single time, just use a radio button. It's exactly what they were designed for, and it saves the need for any JS code at all:

<div class="row  m-t-10 m-l-5">
  <div class="form-group row">
    <div class="col-sm-4">
      <label class="checkbox-inline">  
        <input type="radio" class="check_class" value="is_email" name="send">
        Email send?
      </label>
    </div>
    <div class="col-sm-4">
      <label class="checkbox-inline"> 
        <input type="radio" class="check_class" value="is_sms" name="send">
        Sms send?
      </label>
    </div>
  </div>
</div>

score 0 · Answer 4 · answered Aug 31 '17 at 10:30

You can use not(this) to uncheck all other check boxes.

$(document).ready(function() {
  $(document).on('change', ".check_class", function() {
    $(".check_class").not(this).prop('checked', false); 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row  m-t-10 m-l-5">
  <div class="form-group row">
    <div class="col-sm-4">
      <label class="checkbox-inline">  <input type="checkbox" class="check_class"  value="is_email" name="is_email">Email send?</label>
    </div>
    <div class="col-sm-4">
      <label class="checkbox-inline"> <input type="checkbox" class="check_class"  value="is_sms" name="is_sms">Sms send?</label>
    </div>
  </div>
</div>

how to select one check box and uncheck other in one time using js

4 Answers4