javascript - how to select one check box and uncheck other in one time using js - Stack Overflow

admin管理员组

文章数量:1389903

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=".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>

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

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 15, 2021 at 4:52 Death-is-the-real-truth 72.3k1010 gold badges5757 silver badges104104 bronze badges asked Aug 31, 2017 at 10:22 sradhasradha 2,25422 gold badges3131 silver badges5151 bronze badges 3

• 3 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 Commented Aug 31, 2017 at 10:23
• 1 no i need check box.. – sradha Commented Aug 31, 2017 at 10:24
• For what reason? – Rory McCrossan Commented Aug 31, 2017 at 10:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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>

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

});

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

本文标签： javascripthow to select one check box and uncheck other in one time using jsStack Overflow