отключить флажок, если установлены другие флажки

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

Я думаю, это будет более простой ответ на ваш вопрос.

$("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);
    }
  }
})

Answer 2

Так что добавьте обработчик изменений и проверьте, нет ли в нем никого. Если это так, снимите флажок с другими. Если это не никто, чем снять галочку ни с кем.

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 3

Пытался объяснить в комментариях. надеюсь, это поможет

//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);
    }

})

Поиграйте здесь Пример

Answer 4

Небольшое изменение в вашем коде, и теперь оно работает.

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

Попробуйте это. Я использую только javascript.

1. JavaScript Решение

    <p>
        <input id="noneAboveCheck" type="checkbox" onchange="toggleCheckbox(this)" />no one</p>
    <div id="noneAbove" class="hidden">
        <p>
            <input id="incarcerated" type="checkbox" onchange="toggleCheckbox(this)"/> button 1
        </p>
        <p>
            <input id="support" type="checkbox" onchange="toggleCheckbox(this)"/>button 2</p>
    </div>

Javascript код

function toggleCheckbox(element)
     {

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

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

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

     }

2. Jquery Решение

Html

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

Jquery Код

$(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);
  }

  });
});