Question

我想，当我在第一个复选框“没有一个”其他复选框，将取消选中，并点击时，其他复选框被选中的复选框“没有人”这将是这一次选中，谁能告诉我如何请？

<p>
    <input id="noone" type="checkbox" />no one</p>
<div id="noneAbove" class="hidden">
    <p>
        <input id="btn1" type="checkbox" /> button 1
    </p>
    <p>
        <input id="btn2" type="checkbox" />button 2</p>
</div>

我的代码是

$(function(){
  $('#noone').on('click',function(){
   var noone = document.getElementById("noneAboveCheck");
  var btn1 = document.getElementById("btn1");
  var btn2 = document.getElementById("btn2");
  if (noone.checked == true){
    btn1.checked = false;
    bnt2.checked = false;
  } else {
     none.checked = false;
  }
  });
});

Answer 1

尝试一下。我只使用javascript。

1。 JavaScript解决方案

function toggleCheckbox(element)
     {

      if(element.id=='noneAboveCheck')
     {

     document.getElementById("incarcerated").checked = false;
     document.getElementById("support").checked = false;

     }else
     {
     document.getElementById("noneAboveCheck").checked = false;
     }

     }

JavaScript代码

<p>
    <input id="noone" type="checkbox" />no one</p>
<div id="noneAbove" class="hidden">
    <p>
        <input id="btn1" type="checkbox" /> button 1
    </p>
    <p>
        <input id="btn2" type="checkbox" />button 2</p>
</div>

2。 jQuery解决方案

HTML

$(function(){
  $('input[type=checkbox]').change(function(event) {
  alert(event.target.id);

  if(event.target.id=='noone')
  {
  alert(1);
  $("#btn1").prop("checked", false);
  $("#bnt2").prop("checked", false);

  }else
  {
  alert(2);
  $("#noone").prop("checked", false);
  }

  });
});

jQuery代码

{{1}}

Answer 2

试图在评论中解释。希望对您有帮助

//get the click event on any checkbox 
$(document).on('click','input:checkbox',function(event) {
// only if input is checked
if(this.checked) {
             //then first select all checkboxes and uncheck them
        $("input:checkbox").each(function(i,ele){
          $(this).prop("checked",false);
        })
      //now check only one you clicked  
          $(this).prop("checked",true);
    }

})

在这里Example

Answer 3

只需对您的代码稍作更改，即可使用。

$(function(){
  $('#noone').on('change',function(){
     var btn1 = document.getElementById("btn1");
     var btn2 = document.getElementById("btn2");
     if ($(this).prop('checked') === true){
       $('#btn1').prop('checked', false);
       $('#btn2').prop('checked', false);
     }
  });
  
  $('#btn1, #btn2').on('change',function(){
      var noone = document.getElementById("noneAboveCheck");
      if ($(this).prop('checked') === true){
         $('#noone').prop('checked', false);
      } 
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
    <input id="noone" type="checkbox" />no one</p>
<div id="noneAbove" class="hidden">
    <p>
        <input id="btn1" type="checkbox" /> button 1
    </p>
    <p>
        <input id="btn2" type="checkbox" />button 2</p>
</div>

Answer 4

因此添加更改处理程序并检查是否没有人。如果是，请取消选中其他选项。如果不是没人，则取消选中任何人。

const cbs = $('input[type="checkbox"]')
cbs.on("change", function () {
  if (this.checked) {
    if (this.id==='noone') {
      cbs.not(this).prop("checked", false)
    } else {
      $("#noone").prop("checked", false)
    }
  }
})

label {
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input id="noone" type="checkbox" />no one</label>
<div id="noneAbove" class="hidden">
  <label>
    <input id="btn1" type="checkbox" />button 1
  </label>
  <label>
    <input id="btn2" type="checkbox" />button 2</label>
</div>

Answer 5

我认为这将是对您问题的更简单答案。

$("input:checkbox:not(:checked)").on('change', function(){
   if(this.checked){
    var id = $(this).attr("id");
    if(id == "noone"){
      $("input:checkbox").each(function(i){ 
       if($(this).attr("id")!=id)$(this).prop("checked", false);;
      })
    }else{
      $("#noone").prop("checked", false);
    }
  }
})

如果选中了其他复选框，则禁用该复选框

5 个答案: