Question

这是我的代码。在这里，我为输入复选框

指定了相同的类名

$(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>

我尝试了很多，但它仍然无法正常工作。任何错误。谢谢。

Answer 1

如果您使用 prop() 而不是 attr() 如下： -

＆＃13;
＆＃13;
$(document).ready(function() { $(document).on('change', ".check_class", function () { $(".check_class").prop("checked", false); $(this).prop("checked", true); }); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

注意： - 您可以使用单选按钮，因为它们默认使用它。

参考： - why .attr() not worked but .prop() worked

Answer 2

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

});

Answer 3

如果一次只检查其中一个复选框，只需使用单选按钮即可。它正是它们的设计目标，它完全不需要任何JS代码：

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

Answer 4

您可以使用not(this)取消选中所有其他复选框。

$(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>

如何选择一个复选框并使用js一次取消选中其他复选框

4 个答案: