HTMLFormControlsCollection API

Question

我有2个复选框，当一个复选框被选中时，另一个必须被禁用；如果未选中，则必须再次选中两个复选框（一次只能单击一个复选框）。我不能使用单选按钮，并且复选框的名称/标识不能相似。如果您能提供帮助，我将不胜感激。纯JavaScript。

function change(type){
    var checked = document.getElementById(type.id);
    var wan=document.getElementsByName('test');
    var ven = document.getElementsByName('testing');
    
        	
    
    if (checked.checked) {
    	if(wan){
    	document.getElementById('testing').disabled =true;
    	document.getElementById('test').disabled =false;

    	}
    	if(ven){
		document.getElementById('testing').value = 2;
		document.getElementById('test').disabled =true;
    	document.getElementById('testing').disabled =false;

    	}
    	}

<input type="checkbox" id="test" name="test" onclick="change(this)"/>test
<input type="checkbox" id="testing" name="testing" onclick="change(this)"/>testing

Answer 1

这是一个有效的示例：

<!DOCTYPE html>
<html>
<script type="text/javascript">

function change(){
    var wan = document.getElementById('test');
    var ven = document.getElementById('testing');
    
        	
    
    if (wan.checked) {
    	document.getElementById('testing').disabled= true;
    	document.getElementById('test').disabled= false;

    }else if (ven.checked){
		document.getElementById('testing').value = 2;
		document.getElementById('test').disabled =true;
    	document.getElementById('testing').disabled =false;
	}
	else {
		document.getElementById('testing').disabled= false;
		document.getElementById('test').disabled =false;
	}
 }
</script>

<body>
	
<input type="checkbox" id="test" name="test" onClick="change()"/>test
<input type="checkbox" id="testing" name="testing" onClick="change()"/>testing
</body>

</html>

Answer 2

请参见下面的内联评论：

// Get both checkboxes into an Array
let boxes = Array.prototype.slice.call(document.querySelectorAll("input.chk"));

// Loop over the boxes
boxes.forEach(function(box){    

  // Set up event handler
  box.addEventListener("click", function(){

    // If the currently clicked box is checked
    if(box.checked){
      // Loop over the boxes again
      boxes.forEach(function(cb){
        // Disable the box if it's not the current box
        if(cb !== box){
          cb.setAttribute("disabled", "disabled");
        }
      });    
    } else {
      // Loop over boxes again
      boxes.forEach(function(b){
        b.removeAttribute("disabled");  // Enable the box
      });
    }
  });
});

<input type="checkbox" class="chk" name="test">test
<input type="checkbox" class="chk" name="testing">testing

Answer 3

您应该为此单选按钮，如果有帮助的话还是会更好

Checkbox2: <input type="checkbox" id="myCheck2"  onclick="myFunction2()">
Checkbox1: <input type="checkbox" id="myCheck1"  onclick="myFunction1()">

<script>
function myFunction2() {
    var checkBox1 = document.getElementById("myCheck1");    
    var checkBox2 = document.getElementById("myCheck2");
     if (checkBox2.checked == true){
        checkBox1.checked = false
    } 
}
function myFunction1() {
    var checkBox1 = document.getElementById("myCheck1");    
    var checkBox2 = document.getElementById("myCheck2");
    if (checkBox1.checked == true){
        checkBox2.checked = false
    }
}
</script>

Answer 4

使用公共类或某些数据集元素会更容易。您只需要让浏览器使用document.querySelectorAll就可以给他们所有。然后，您可以使用任何CSS selector

function checkOneOfGroup(selector, checkedId) {
  document.querySelectorAll(selector).forEach((element) => {
    element.checked = element.id === checkedId;
  });
}

const selector = "input[type=checkbox].group1"; 

function handleChange(element) {
  checkOneOfGroup(selector, element.target.id);
}

document.querySelectorAll(selector).forEach((element) => {
  element.addEventListener('change', handleChange);
});

checkOneOfGroup(selector, 'apple'); // start with apple checked

<input type="checkbox" class="group1" id="orange"><label for="orange">orange</label>
<input type="checkbox" class="group1" id="apple"><label for="apple">apple</label>
<input type="checkbox" class="group1" id="banana"><label for="banana">banana</label>
<input type="checkbox" class="group1" id="pear"><label for="pear">pear</label>
<input type="checkbox" class="group1" id="peach"><label for="peach">peach</label>

改为使用dataset元素

function checkOneOfGroup(selector, checkedId) {
  document.querySelectorAll(selector).forEach((element) => {
    element.checked = element.id === checkedId;
  });
}

const selector = "input[type=checkbox][data-foo=group1]"; 

function handleChange(element) {
  checkOneOfGroup(selector, element.target.id);
}

document.querySelectorAll(selector).forEach((element) => {
  element.addEventListener('change', handleChange);
});

checkOneOfGroup(selector, 'apple'); // start with apple checked

<input type="checkbox" data-foo="group1" id="orange"><label for="orange">orange</label>
<input type="checkbox" data-foo="group1" id="apple"><label for="apple">apple</label>
<input type="checkbox" data-foo="group1" id="banana"><label for="banana">banana</label>
<input type="checkbox" data-foo="group1" id="pear"><label for="pear">pear</label>
<input type="checkbox" data-foo="group1" id="peach"><label for="peach">peach</label>

您也可以将它们包围在其他元素中，然后将其用作选择器

function checkOneOfGroup(selector, checkedId) {
  document.querySelectorAll(selector).forEach((element) => {
    element.checked = element.id === checkedId;
  });
}

const selector = "#fruits input[type=checkbox]"; 

function handleChange(element) {
  checkOneOfGroup(selector, element.target.id);
}

document.querySelectorAll(selector).forEach((element) => {
  element.addEventListener('change', handleChange);
});

checkOneOfGroup(selector, 'apple'); // start with apple checked

<div id="fruits">
 <input type="checkbox" id="orange"><label for="orange">orange</label>
 <input type="checkbox" id="apple"><label for="apple">apple</label>
 <input type="checkbox" id="banana"><label for="banana">banana</label>
 <input type="checkbox" id="pear"><label for="pear">pear</label>
 <input type="checkbox" id="peach"><label for="peach">peach</label>
</div>

Answer 5

HTMLFormControlsCollection API

HFCC API允许我们以简洁的语法访问chown及其所有表单控件：

收集页面中的所有<form>s： <form>s
     收集var FORM = document.forms的所有表单控件： <form>
     通过var FC = FORM.elements或#id引用表单控件： [name]

演示

var CHK = FC.nameOfInput

var sw = document.forms[0];
var ui = sw.elements;
var yin = ui.yin;
var yng = ui.yang;

sw.onchange = flip;

function flip(e) {
  var tgt = e.target;
  if (tgt.id === 'yin' && tgt.checked) {
    tgt.disabled = false;
    yng.disabled = true;
  } else if (tgt.id === 'yang' && tgt.checked) {
    tgt.disabled = false;
    yin.disabled = true;
  } else if (!tgt.checked) {
    yin.disabled = false;
    yng.disabled = false;
  } else {
    return false;
  }
}

html {
  font: 400 16px/1.5 "Ceviche One";
}

body {
  font-size: 1rem;
  background: #900;
}

form {
  font: inherit;
  font-size: 2rem
}

[type=checkbox] {
  display: none
}

label {
  display: inline-block;
  cursor: pointer;
  padding: 0px 2px;
  width: 60px;
  text-align: center;
  line-height: 1.2;
}

[name=yin]+label {
  border: 3px double #fff;
  color: #fff;
  background: #000;
}

[name=yang]+label {
  border: 3px double #000;
  color: #000;
  background: #fff;
}

input[type=checkbox]:disabled+label {
  border-color: #aaa;
  color: #aaa;
  background: #666;
}

input[type=checkbox]:checked+label {
  border: 3px double #980;
  color: #f00;
  background: none;
}

.symbol {
  font-size: 3rem;
  width: fit-content;
  line-height: 2.5rem;
  background: #fff;
  border-radius: 30%;
  vertical-align: sub;
  padding: 6px 0px 0px 0px;
}

Answer 6

有人问过类似的问题，这里html select only one checkbox in a group

顺便说一句，在我看来，使用单选按钮会更好，因为它已经可以完成您想做的事情。

希望有帮助！

一次仅选中一个复选框

6 个答案:

HTMLFormControlsCollection API

演示