0

我是 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>

4

1 回答 1

0

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

我已经向JSFiddle上传了一个可能的解决方案- 您基本上可以将事件侦听器添加到复选框中，当单击时重新检查选择了多少，并通过删除/添加类来显示/隐藏，例如additionalContactBox.classList.remove('reveal-if-active');

于 2017-06-22T13:52:16.860 回答