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

对于jQuery> = 1.6

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

对于jQuery <1.6：

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

Answer 2

只需检查所单击的项目是否已打开或关闭，例如：

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 3

您可以在事件监听器中使用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 4

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 JS函数，谢谢。

Answer 5

这将按您的要求工作，默认情况下启用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>

一次选中一个复选框-不是单选按钮

5 个答案: