复选框限制

Question

我从另一个问题中找到了这个片段，但我想知道如何调整它以在达到限制后显示消息。是在函数中向slideToggle添加.checkboxmsg的最佳方法吗？

＆＃13;

＆＃13;

limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 
    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes
      }
    } else { //if limit is less than two
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
      }
    }
  }
}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

＆＃13;

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div class="checkboxmsg">Only two options are allowed</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你快到了。只需要在达到限制时切换消息框的显示

＆＃13;

＆＃13;

localhost

＆＃13;

limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true;  
        document.getElementsByClassName("checkboxmsg")[0].style.display = "block"
        

      }

    } else { //if limit is less than two

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false;  document.getElementsByClassName("checkboxmsg")[0].style.display = "none"
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

＆＃13;

.checkboxmsg{
 display: none;
 color : red !important;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

最初，隐藏checkboxmsg div，然后在达到限制时显示它，如果计数较低，则再次隐藏它。

这是一个显示/隐藏div的函数：

function toggleMessage(state) {
    var display = state ? 'block' : 'none';
    document.querySelector('.checkboxmsg').style.display = display;
}

工作演示：

＆＃13;

＆＃13;

limit = 0; //set limit


checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit == 2) {
      toggleMessage(true);
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes

      }

    } else { //if limit is less than two
      toggleMessage(false);

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
      }

    }
  }

}

function toggleMessage(state) {
  var display = state ? 'block' : 'none';
  document.querySelector('.checkboxmsg').style.display = display;
}

toggleMessage(false);

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

＆＃13;

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <label><input type="checkbox" name="check" value="One">One</label> <br/>
  <label><input type="checkbox" name="check" value="Two">Two</label> <br/>
  <label><input type="checkbox" name="check" value="Three">Three</label>
</div>
<div class="checkboxmsg">Only two options are allowed</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用课程隐藏消息，并通过监控limit = 0; //set limit checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes msg = document.getElementById('msg'); function checker(elem) { if (elem.checked) { //if checked, increment counter limit++; } else { limit--; //else, decrement counter } if(limit == 2) msg.classList.remove('hide'); else msg.classList.add('hide'); for (i = 0; i < checkboxes.length; i++) { // loop through all if (limit == 2) { if (!checkboxes[i].checked) { checkboxes[i].disabled = true; // and disable unchecked checkboxes } } else { //if limit is less than two if (!checkboxes[i].checked) { checkboxes[i].disabled = false; // enable unchecked checkboxes } } } } for (i = 0; i < checkboxes.length; i++) { checkboxes[i].onclick = function() { //call function on click and send current element as param checker(this); } }

进行切换

＆＃13;

＆＃13;

.checkboxmsg.hide{
  display: none
}

＆＃13;

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div id="msg" class="checkboxmsg hide">Only two options are allowed</div>

＆＃13;

inline

＆＃13;

＆＃13;

＆＃13;

Answer 4

limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }


  for (i = 0; i < checkboxes.length; i++) { // loop through all 
    var ele = document.getElementById("toggleText");

    if (limit == 2) {

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes
      }
ele.style.display = "block";

    } else { //if limit is less than two
       if (ele.style.display == "block") {

        ele.style.display = "none";
    }
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div id="toggleText" class="checkboxmsg" style="display: none">Only two options are allowed</div>

Answer 5

您可以使用innerHTML和querySelector来更改div checkboxmsg

＆＃13;

＆＃13;

limit = 0; //set limit
var checkboxmsg = document.querySelector('.checkboxmsg')

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes
        checkboxmsg.innerHTML = "Limit reached!"
      }

    } else { //if limit is less than two

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
        checkboxmsg.innerHTML = "Only two options are allowed"
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

＆＃13;

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div class="checkboxmsg">Only two options are allowed</div>

＆＃13;

＆＃13;

＆＃13;