Один флажок отмечен за раз - не радио кнопки

Question

Прежде, чем вы порекомендуете радио-кнопки, я хочу использовать флажки, потому что они могут быть сняты. У меня есть 2 пользовательских флажка # c1 & # c2; Я хочу, чтобы одно открывалось за раз (поэтому, если c1 был открыт, нажатие c2 снимает флажок c1); и я хочу, чтобы оба были в состоянии быть неконтролируемым. Любые идеи будут с благодарностью!

Вот что я пробовал: `

let c1 = document.getElementById('c1');
let c2 = document.getElementById('c2');

function oneAtATime() {
  if (c1.checked) {
    c2.checked = false;
  } else if (c2.checked) {
    c1.checked = false;
  }
}
c1.addEventListener('change', oneAtATime);
c2.addEventListener('change', oneAtATime);

<input id="c1" type="checkbox" name="checkbox" class="check">
<label for="c1">
        <h2>example</h2>
    </label>
<input id="c1" type="checkbox" name="checkbox" class="check">
<label for="c1">
        <h2>example</h2>
    </label>

Answer 1

это будет работать так, как вы просили, если галочка 2 включена по умолчанию,

будет работать и с любой версией jquery.

если вы щелкнете по любому из флажков, другой будет снят.

надеюсь, это поможет вам:)

на вашей html-странице это код:

<input id="c1" type="checkbox" name="checkbox" class="check" onchange="unloadc1()">
<label for="c1">
<h2>example</h2>
</label>
<input id="c2" type="checkbox" name="checkbox" class="check" onchange="unloadc2()">
<label for="c1">
<h2>example</h2>
</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<Script>


function unloadc2() { 
document.getElementById("c1").checked = false;
document.getElementById("c2").checked = true;

}

function unloadc1() { 


document.getElementById("c2").checked = false;
document.getElementById("c1")

    <input id="c1" type="checkbox" name="checkbox" class="check" onchange="unloadc1()">
    <label for="c1">
    <h2>example</h2>
    </label>
    <input id="c2" type="checkbox" name="checkbox" class="check" onchange="unloadc2()">
    <label for="c1">
    <h2>example</h2>
    </label>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <Script>


    function unloadc2() { 
    document.getElementById("c1").checked = true;
    document.getElementById("c2").checked = false;

    }

    function unloadc1() { 


    document.getElementById("c2").checked = true;
    document.getElementById("c1").checked = false;

    }

    $(function() {
    document.getElementById("c1").checked = true;
    document.getElementById("c2").checked = true;
    });
    </script>

Answer 2

c1.onclick=()=>{
	if(c2.checked) c2.checked=false;
}

c2.onclick=()=>{
	if(c1.checked) c1.checked=false;
}

<input id="c1" type="checkbox" name="checkbox" class="check">
<label for="c1"><h2>example</h2></label>
<input id="c2" type="checkbox" name="checkbox" class="check">
<label for="c2"><h2>example</h2></label>

Сначала вы должны изменить id на c2 для второго раздела и убедиться, что атрибут for тоже для c2, а затем проверить эту простую ванильную функцию JS, спасибо.

Answer 3

Просто проверьте, включен или выключен элемент, по которому щелкают, например:

let c1 = document.getElementById('c1');
let c2 = document.getElementById('c2');

function oneAtATime() {
if (this.checked){ // Item clicked has been turned on
    if (this == c1){
        c2.checked = false;
    } else {
        c1.checked = false;
    }
}
}
c1.addEventListener('change', oneAtATime);
c2.addEventListener('change', oneAtATime);

<input id="c1" type="checkbox" name="checkbox" class="check">
<label for="c1">
        <h2>example</h2>
    </label>
<input id="c2" type="checkbox" name="checkbox" class="check">
<label for="c2">
        <h2>example</h2>
    </label>

Answer 4

Вы можете использовать this в прослушивателе событий для ссылки на элемент, по которому щелкнули. Вам нужно снять флажок только в том случае, если вы устанавливаете текущий флажок.

let c1 = document.getElementById('c1');
let c2 = document.getElementById('c2');

function oneAtATime() {
  if (this.checked) {
    let other = this == c1 ? c2 : c1;
    other.checked = false;
  }
}
c1.addEventListener('change', oneAtATime);
c2.addEventListener('change', oneAtATime);

<input id="c1" type="checkbox" name="checkbox" class="check">
<label for="c1">
        <h2>example</h2>
    </label>
<input id="c2" type="checkbox" name="checkbox" class="check">
<label for="c2">
        <h2>example</h2>
    </label>

Answer 5

Для jQuery> = 1.6

$('.check').prop('checked', true);
$('.check').prop('checked', false);

Для jQuery <1.6: </p>

$('.check').attr('checked', true);
$('.check').attr('checked', false);

Отрывок:

$('.check').click(function(){
  if ($(this).is(':checked')) {
    $('.check').prop('checked', false);
    $(this).prop('checked', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="c1" type="checkbox" name="checkbox" class="check">
<label for="c1">
        <h2>example</h2>
    </label>
<input id="c2" type="checkbox" name="checkbox" class="check">
<label for="c2">
        <h2>example</h2>
    </label>