Javascript 将选定的复选框限制为 2 个

Question

我想禁用选择超过 2 个选择复选框，但我无法使用我的 javascript 代码做到这一点。我该怎么做？

btn.addEventListener("click",function () {
var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET','questions.json');//json dosyasından sorular ve sıklar okunuyor
    ourRequest.onload = function () {
        pos = 0;
        counters = [A=0,B=0,C=0,D=0];
        ourData = JSON.parse(ourRequest.responseText);
        renderQuestion(ourData);
        btn.innerHTML = "BAŞA DÖN";
    }
    ourRequest.send();
})


var renkler = ["Yeşil","Sarı","Mavi","Kırmızı"];

function _(x){
return document.getElementById(x);//html dom
}
function renderQuestion(data){ //soru soran fonksiyon
test = _("test"); //dom ile test div ini seç
if(pos >= 4){//eğer pozisyon soru sayısından büyükse veya soru sayısına eşitse

    document.getElementById('btntest').style.visibility = "hidden";

    for(var i = 0;i<choices.length;i++){test.innerHTML += "<h2>Sonuç : "+renkler[i]+" renkli kişilikten "+ counters[i] +" puanlık işaretlediniz.</h2>";}// test divine sonucu yazdır
        _("test_status").innerHTML = "Testi tamamladınız."; // "test_status" başlığına test bitti yazdır
        btn.innerHTML = "TEKRAR";
        A=0;B=0;C=0;D=0;
        pos = 0; // pos tekrar 0 yap
        return false; //false döndür
}

//_("test_status").innerHTML = "Question "+(pos+1)+"of"+data.length; // "test_status başlığına hangi soruda olduğunu yazdır
question = data[pos].soru; // questions listesinden 0. yani soru kısmını question değişkenine ata
chA = data[pos].siklar1; // 1.cevap
chB = data[pos].siklar2; // 2.cevap
chC = data[pos].siklar3;
chD = data[pos].siklar4;// 3.cevap
test.innerHTML = "<h3>"+question+"</h3>"; //soruyu yazdır
test.innerHTML += "<input class='single-checkbox' type='checkbox'  id='ch1' name='choices' value='A'>"+chA+"<br>"; //1.cevabı yazdır
test.innerHTML += "<input class='single-checkbox' type='checkbox' id='ch2' name='choices' value='B'> "+chB+"<br>"; //2.cevabı yazdır
test.innerHTML += "<input class='single-checkbox' type='checkbox' id='ch3' name='choices' value='C'> "+chC+"<br>"; //3.cevabı yazdır
test.innerHTML += "<input class='single-checkbox' type='checkbox' id='ch4' name='choices' value='D'> "+chD+"<br><br>"; //4.cevabı yazdır

test.innerHTML += "<button id='btntest' class='button' onclick='checkAnswer()'> DEVAM ET >> </button>"    //cevabı kontrol et fonksiyonunu cağır
}

function checkAnswer(){
choices = document.getElementsByName("choices"); // seçenekler domunu seç
if(choices[0].checked){
    if(choices[1].checked || choices[2].checked || choices[3].checked)   {
        counters[0]+=1;
        findChecked(choices);
        choices[0].checked = "false";
    }
    else{
        counters[0]+=2;
    }
}
else if(choices[1].checked){
    if(choices[0].checked || choices[2].checked || choices[3].checked){
        counters[1]+=1;
        findChecked(choices);
    }
    else{
        counters[1]+=2;

    }
}
else if(choices[2].checked){
    if(choices[0].checked || choices[1].checked || choices[3].checked){
        counters[2]+=1;
        findChecked(choices);
    }
    else{
        counters[2]+=2;

    }
}
else if(choices[3].checked){
    if(choices[0].checked || choices[1].checked || choices[2].checked){
        counters[3]+=1;
        counters[3]++;
    }
    else{
        counters[3]+=2;

    }

}
pos++; // pozisyonu 1 arttır
renderQuestion(ourData); //render questionsu tekrar çağır
}

Answer 1

您可能可以使用这一逻辑来防止选择多个复选框：

1. 检查选中的选择框的总数。
2. 如果总数超过最大数量，则禁用检查。

代码：

<label><input type="checkbox" class="check" /> Checkbox 1</label>
<label><input type="checkbox" class="check" /> Checkbox 2</label>
<label><input type="checkbox" class="check" /> Checkbox 3</label>
<label><input type="checkbox" class="check" /> Checkbox 4</label>
<label><input type="checkbox" class="check" /> Checkbox 5</label>

同样的 JavaScript。

var checks = document.querySelectorAll(".check");
var max = 2;
for (var i = 0; i < checks.length; i++)
  checks[i].onclick = selectiveCheck;
function selectiveCheck (event) {
  var checkedChecks = document.querySelectorAll(".check:checked");
  if (checkedChecks.length >= max + 1)
    return false;
}

片段

var checks = document.querySelectorAll(".check");
var max = 2;
for (var i = 0; i < checks.length; i++)
  checks[i].onclick = selectiveCheck;
function selectiveCheck (event) {
  var checkedChecks = document.querySelectorAll(".check:checked");
  if (checkedChecks.length >= max + 1)
    return false;
}

<label><input type="checkbox" class="check" /> Checkbox 1</label>
<label><input type="checkbox" class="check" /> Checkbox 2</label>
<label><input type="checkbox" class="check" /> Checkbox 3</label>
<label><input type="checkbox" class="check" /> Checkbox 4</label>
<label><input type="checkbox" class="check" /> Checkbox 5</label>

Answer 2

以下代码仅允许选择两个复选框。

• setCustomValidity()

  更改验证失败时显示的错误消息，同时将输入标记为无效（如果将错误消息传递到

  setCustomValidity

  ，我们正在这样做）。

• reportValidity()

  使错误消息立即显示。如果没有它，我们将不得不等待表单提交才能显示错误。

• 如果复选框被选中，我们立即将其设置回未选中状态

  this.checked = false

  。当 onchange 事件处理程序运行时，复选框已经在 DOM 中被选中，所以这就是我们必须做的事情。另一种方法是按照 Praveen 在他的回答中使用点击处理程序所做的方式来编写这部分代码。

/* Makes the checkbox only allow 2 items to be selected */
document.querySelectorAll('.checkboxes-container input[type=checkbox]').forEach(el=>{
  el.addEventListener('change', function(){
    if ( el.closest('.checkboxes-container').querySelectorAll('input:checked').length > 2 ){
      this.setCustomValidity('There is a max of two items that can be selected')
      this.checked = false
      this.reportValidity()
    }
  })
});

<div class='checkboxes-container'>
  <label><input class='single-checkbox' type='checkbox' value='A'>chA</label><br>
  <label><input class='single-checkbox' type='checkbox' value='B'>chB</label><br>
  <label><input class='single-checkbox' type='checkbox' value='C'>chC</label><br>
  <label><input class='single-checkbox' type='checkbox' value='D'>chD</label><br>
</div>