如何水平对齐复选框并在单击时显示表单

我一直在搜索堆栈溢出，但是，我无法找到与我的问题相关的解决方案。我想要的是当用户单击复选框时，会出现一个表单。我设法得到一个复选框并使表单显示，但无法将复选框并排放置。所以我想要的是：

[] residential   [] commercial    [] industrial.

当用户单击上述框时，将在同一页面上打开一个表单。我的代码：

编辑：感谢@brk提供的解决方案。复制下面的解决方案后，出于某种原因，当我单击"住宅"时，我没有看到任何弹出的内容。我的代码：

<script>
// Add event listener to each of the radio button
document.querySelectorAll('input[name="selectType"]').forEach(function(item) {
  item.addEventListener('click', function(e) {
    // get the data-type from this, this data-type will be used to
    // hide show relevant form
    let name = this.getAttribute('data-type');
    // hide previously displayed form
    if (document.querySelector('.formDisplay') !== null) {
      document.querySelector('.formDisplay').classList.remove('formDisplay');
    }
    // find the form whose name+_info is same as the name of the form 
    // & add a formDisplay to it
    document.querySelector('form[name="' + name + '_info"]').classList.add('formDisplay');
  })
})
</script>
<style>
form {
  display: none;
}
.formDisplay {
  display: block;
}
</style>
<html>
<body>
  <div class="form-group">
    <input id="checkboxR" data-type='res' name='selectType' type='radio'>
    <label for="checkboxR">Residential</label>
    <input id="checkboxC" data-type='com' name='selectType' type='radio'>
    <label for="checkboxC">Commercial</label>
    <input id="checkboxI" data-type='ind' name='selectType' type='radio'>
    <label for="checkboxI">Industrail</label>
  </div>
  <form name="res_info" action="/result/" method="get" class="form-horizontal" role="form">
    Residential Form
  </form>
  <form name="com_info" action="/result/" method="get" class="form-horizontal" role="form">
    Commercial Form
  </form>
  <form name="ind_info" action="/result/" method="get" class="form-horizontal" role="form">
    Industrial Form
  </form>
</body>
</html>

所以，我看到 3 个单选按钮，但单击它们不会打开任何内容。对不起，我对html/css有点陌生，所以这个概念是新的。

在 html 中进行更改并添加另一个属性data-type 。此值将用于显示相应的表单。

创建 tep css 并最初隐藏所有表单。添加另一个类以使用 display:block 显示窗体

单击单选按钮获取data-type查找名称与此数据类型匹配的 forma 并显示该表单

// Add event listener to each of the radio button
document.querySelectorAll('input[name="selectType"]').forEach(function(item) {
  item.addEventListener('click', function(e) {
    // get the data-type from this, this data-type will be used to
    // hide show relevant form
    let name = this.getAttribute('data-type');
    // hide previously displayed form
    if (document.querySelector('.formDisplay') !== null) {
      document.querySelector('.formDisplay').classList.remove('formDisplay');
    }
    // find the form whose name+_info is same as the name of the form 
    // & add a formDisplay to it
    document.querySelector('form[name="' + name + '_info"]').classList.add('formDisplay');
  })
})

form {
  display: none;
}
.formDisplay {
  display: block;
}

<body>
  <div class="form-group">
    <input id="checkboxR" data-type='res' name='selectType' type='radio'>
    <label for="checkboxR">Residential</label>
    <input id="checkboxC" data-type='com' name='selectType' type='radio'>
    <label for="checkboxC">Commercial</label>
    <input id="checkboxI" data-type='ind' name='selectType' type='radio'>
    <label for="checkboxI">Industrail</label>
  </div>
  <form name="res_info" action="/result/" method="get" class="form-horizontal" role="form">
    Residential Form
  </form>
  <form name="com_info" action="/result/" method="get" class="form-horizontal" role="form">
    Commercial Form
  </form>
  <form name="ind_info" action="/result/" method="get" class="form-horizontal" role="form">
    Industrial Form
  </form>
</body>

这对

我有用

<body>
<div class="form-group">
    <div class="horizontal">
            <input id="checkbox" type=checkbox> Residential</input>
    </div>
    <div class="horizontal" id="delivery_div" style="display:none">
        <input  id="delivery" type=checkbox > etc </input>
    </div>
</div>
<script>
    var checkbox = document.getElementById('checkbox');
var delivery_div = document.getElementById('delivery_div');
checkbox.onclick = function() {
console.log(this);
if(this.checked) {
 delivery_div.style['display'] = 'block';
}  else {
 delivery_div.style['display'] = 'none';
  }
};
</script>
<style>

<body>
<div class="form-group">
	<div class="horizontal">
    		<input id="checkbox" type=checkbox> Residential</input>
	</div>
	<div class="horizontal" id="delivery_div" style="display:none">
   	 	<input  id="delivery" type=checkbox > etc </input>
	</div>
</div>
<script>
    var checkbox = document.getElementById('checkbox');
var delivery_div = document.getElementById('delivery_div');
checkbox.onclick = function() {
console.log(this);
if(this.checked) {
 delivery_div.style['display'] = 'block';
}  else {
 delivery_div.style['display'] = 'none';
  }
};
</script>
<style>
.horizontal {
  display: inline-block;
  float:left;
}
</style>
</body>

.horizontal {
  display: inline-block;
  float:left;
}
</style>
</body>

相关内容

最新更新

热门标签：