根据两个(三个中的)复选框显示附加信息 JavaScript

Reveal additional info based on two (out of three) checkboxes JavaScript

我是 Javascript 的新人,我试图仅在选中 3 个复选框中的任意 2 个时才显示其他信息。

到目前为止,这是我的代码(我正在尝试在问题中输入我的代码,但它不起作用,抱歉。我也可能让它变得更复杂,然后再必要了,再次抱歉)。我确实将我的代码放在了演示中。

<script>
 
var checkboxes;
window.addEvent('domready', function() {
  var i, checkbox, textarea, div, textbox;
  checkboxes = {};
 // link the checkboxes and textarea ids here
  checkboxes['checkbox_1'] = 'textarea_1';
  checkboxes['checkbox_2'] = 'textarea_2';
  checkboxes['checkbox_3'] = 'textarea_3';
 
  for ( i in checkboxes ) {
    checkbox = $(i);
    textbox = $(checkboxes[i]);
    div = $(textbox.id + '_container_div');
    div.dissolve();
    showHide(i);
    addEventToCheckbox(checkbox);
  }
 
  function addEventToCheckbox(checkbox) {
    checkbox.addEvent('click', function(event) {
      showHide(event.target.id);
    });
  }
});
 
function showHide(id) {
  var checkbox, textarea, div;
  if(typeof id == 'undefined') {
    return;
  }
  checkbox = $(id);
  textarea = checkboxes[id];
  div = $(textarea + '_container_div');
  textarea = $(textarea);
  if(checkbox.checked) {
    div.setStyle('display', 'block');
    //div.reveal();
    div.setStyle('display', 'block');
    textarea.disabled = false;
  } else {
    div.setStyle('display', 'none');
    //div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
}
 
 
      <label for="choice-positive">
<script type="text/javascript">
function validate(f){
f = f.elements;
for (var c = 0, i = f.length - 1; i > -1; --i)
if (f[i].name && /^colors\[\d+\]$/.test(f[i].name) && f[i].checked) ++c;
 
 
return c <= 1;
};
 
</script>
 
<label>
<h4><div style="text-align: left"><font color="black">
<input type="checkbox" name="colors[2]" value="address" id="address">Full Address
 
<br>
<label>
<input type="checkbox" name="colors[3]" value="phone" id="phone">Phone Number <br>
<label>
<input type="checkbox" name="colors[4]" value="account" id="account">Account Number <br>
 
</form>
 
<div class="reveal-if-active">
<h2><p style = "text-decoration:underline;"><font color="green">Receive the 2 following
 
pieces of info:</h2></p>
</style>

抱歉,我无法完全使用您提供的代码,但已尝试进行足够的更改以使其正常工作。

我已经向 JSFiddle 上传了一个可能的解决方案 - 您基本上可以将事件侦听器添加到复选框中,这些复选框在单击时重新检查选中了多少个,并且 show/hide 通过 removing/adding class 例如additionalContactBox.classList.remove('reveal-if-active');