首页 / 技术问答 / Javascript问答列表 / 问答详情

选中输入复选框后有条件地显示带有JavaScript的HTML

我正在修改一个HTML表单，以便在选中"Parent"框后有条件地显示问题的更多子集.我现在的方法运行得很好，但是有没有一种更简单的方法来做到这一点，这样你就不必像在这个例子中那样， for each "海报设计"重写函数.在不专门针对一个ID的情况下编写它的某种方式(可能是使用jQuery)？

我道歉，如果代码是混乱的或似乎缺乏经验-它是.我相信有框架可以让这变得更容易，但是我有点紧张要走出Vanilla JS，因为我有点把它放进一个现有的网站，我不确定使用的是什么框架.

而<table>元素的随机使用只是因为我正在重新制作一位前队友的作品，而还没有将整个过程转换为<div>.

//poster A
function randiPosterAShow() {
  if (document.getElementById('posterA-NewStore').checked) {
    document.getElementById('r-posterA-dropdown').style.display = 'block';
  } else {
    document.getElementById('r-posterA-dropdown').style.display = 'none';
  }
}

//poster A 8.5 x 11
function randiPosterA85Show() {
  if (document.getElementById('postera8511').checked) {
    document.getElementById('r-posterA-85-dropdown').style.display = 'block';
  } else {
    document.getElementById('r-posterA-85-dropdown').style.display = 'none';
  }
}

//poster A 11 x 17
function randiPosterA11Show() {
  if (document.getElementById('postera1117').checked) {
    document.getElementById('r-posterA-11-dropdown').style.display = 'block';
  } else {
    document.getElementById('r-posterA-11-dropdown').style.display = 'none';
  }
}

//poster B
function randiPosterBShow() {
  if (document.getElementById('posterB-SchOrders').checked) {
    document.getElementById('r-posterB-dropdown').style.display = 'block';
  } else {
    document.getElementById('r-posterB-dropdown').style.display = 'none';
  }
}

//poster B 8.5 x 11
function randiPosterB85Show() {
  if (document.getElementById('posterb8511').checked) {
    document.getElementById('r-posterB-85-dropdown').style.display = 'block';
  } else {
    document.getElementById('r-posterB-85-dropdown').style.display = 'none';
  }
}

//poster B 11 x 17
function randiPosterB11Show() {
  if (document.getElementById('posterb1117').checked) {
    document.getElementById('r-posterB-11-dropdown').style.display = 'block';
  } else {
    document.getElementById('r-posterB-11-dropdown').style.display = 'none';
  }
}
<table>
  <tr>
    <td style="width: 80px;" valign="top"><span>Design:</span></td>
    <td>
      <!-- poster A starts here -->
      <input onclick="randiPosterAShow();" autocomplete="off" id="posterA-NewStore" name="posterA-NewStore" tabindex="1" title="Poster design new store" type="checkbox" value="posterA-NewStore" />
      <label for="posterA-NewStore"><span>A (New Store)</span></label>
      <!-- show from here down when "A" is checked. below div should be display:none -->
      <div style="margin: 5px 0 0 25px; display: none;" id="r-posterA-dropdown">Size:
        <div style="display: inline-block; vertical-align: top;">
          <input onclick="randiPosterA85Show();" style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="postera8511" name="postera8511" tabindex="1" title="8.5 x 11" type="checkbox" value="postera8511" />
          <label for="postera8511">8.5" x 11"</label>
          <!-- show from here down when "A – 8.5 x 11" is checked. below div should be set to display:none -->
          <div style="display: none; margin: 5px 0 5px 20px;" id="r-posterA-85-dropdown">Options:
            <div style="display: inline-block; vertical-align: text-top;">
              <input style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="postera85qr" name="postera85qr" tabindex="1" title="8.5 x 11" type="checkbox" value="postera85qr" />
              <label for="postera85qr">Add QR Code</label>
              <br><input style="margin-right: 5px !important;" autocomplete="off" id="postera85sp" name="postera85sp" tabindex="1" title="8.5 x 11" type="checkbox" value="postera85sp" />
              <label for="postera85sp">Include Spanish Version</label>
            </div>
          </div>
          <div>
            <input onclick="randiPosterA11Show();" style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="postera1117" name="postera1117" tabindex="1" title="8.5 x 11" type="checkbox" value="postera1117" />
            <label for="postera1117">11" x 17"</label>
            <!-- show from here down when "A – 11 x 17" is checked. below div should be set to display:none -->
            <div style="display: none; margin: 5px 0 5px 20px;" id="r-posterA-11-dropdown">Options:
              <div style="display: inline-block; vertical-align: text-top;">
                <input style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="postera11qr" name="postera11qr" tabindex="1" title="8.5 x 11 QR Code" type="checkbox" value="postera11qr" />
                <label for="postera11qr">Add QR Code</label>
                <br><input style="margin-right: 5px !important;" autocomplete="off" id="postera11sp" name="postera11sp" tabindex="1" title="8.5 x 11 QR Code" type="checkbox" value="postera11sp" />
                <label for="postera11sp">Include Spanish Version</label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- poster A ends here -->


      <!-- poster B starts here -->
      <div style="margin-top: 5px;">
        <input onclick="randiPosterBShow();" autocomplete="off" id="posterB-SchOrders" name="posterB-SchOrders" tabindex="1" title="Poster design scheduled orders" type="checkbox" value="posterB-SchOrders" />
        <label for="posterB-SchOrders"><span>B (Scheduled Orders)</span></label>
        <!-- show from here down when "B" is checked. below div should be display:none -->
        <div style="margin: 5px 0 0 25px; display: none;" id="r-posterB-dropdown">
          Size:
          <div style="display: inline-block; vertical-align: top;">
            <input onclick="randiPosterB85Show();" style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="posterb8511" name="posterb8511" tabindex="1" title="8.5 x 11" type="checkbox" value="posterb8511" />
            <label for="posterb8511">8.5" x 11"</label>
            <!-- show from here down when "A – 8.5 x 11" is checked. below div should be set to display:none -->
            <div style="display: none; margin: 5px 0 5px 20px;" id="r-posterB-85-dropdown">Options:
              <div style="display: inline-block; vertical-align: text-top;">
                <input style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="posterb85qr" name="posterb85qr" tabindex="1" title="8.5 x 11" type="checkbox" value="posterb85qr" />
                <label for="posterb85qr">Add QR Code</label>
                <br><input style="margin-right: 5px !important;" autocomplete="off" id="posterb85sp" name="posterb85sp" tabindex="1" title="8.5 x 11" type="checkbox" value="posterb85sp" />
                <label for="posterb85sp">Include Spanish Version</label>
              </div>
            </div>
            <div>
              <input onclick="randiPosterB11Show();" style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="posterb1117" name="posterb1117" tabindex="1" title="8.5 x 11" type="checkbox" value="posterb1117" />
              <label for="posterb1117">11" x 17"</label>
              <!-- show from here down when "A – 11 x 17" is checked. below div should be set to display:none -->
              <div style="display: none; margin: 5px 0 5px 20px;" id="r-posterB-11-dropdown">Options:
                <div style="display: inline-block; vertical-align: text-top;">
                  <input style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="posterb11qr" name="posterb11qr" tabindex="1" title="11 x 17 QR Code" type="checkbox" value="posterb11qr" />
                  <label for="posterb11qr">Add QR Code</label>
                  <br><input style="margin-right: 5px !important;" autocomplete="off" id="posterb11sp" name="posterb11sp" tabindex="1" title="11 x 17 Spanish" type="checkbox" value="posterb11sp" />
                  <label for="posterb11sp">Include Spanish Version</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- poster B ends here -->

      <div style="margin-top: 5px;">
        <input autocomplete="off" id="posterC-Topic" name="posterC-Topic" tabindex="1" title="Poster design topic" type="checkbox" value="posterC-Topic" />
        <label for="posterC-Topic"><span>C (Placeholder Topic)</span></label>
      </div>
    </td>
  </tr>
</table>

推荐答案

Make one function, as well name things consistently个

  1. 创建一个函数来处理某些东西的显示/隐藏
  2. 将参数传递给该函数，以便可以对许多元素重复使用该函数
  3. 要实现这一点，您必须确保对所有元素进行一致的命名(无论如何，这是一个很好的实践)

除此之外，您还需要了解的其他内容包括:CSS类，以及通过编程方式生成模板(HTML)以提高效率；有许多方法可以实现这一切.

Sample function:个

function togglePoster(poster) {
  if (document.getElementById('checkbox-poster-'+poster).checked) {
    document.getElementById('dropdown-poster-'+poster).style.display = 'block';
  } else {
    document.getElementById('dropdown-poster-'+poster).style.display = 'none';
  }
}

另一种编写此函数的方法更优雅一些:

function togglePoster(poster) {
  let dropdown = document.getElementById('dropdown-poster-'+poster)
  let checked = document.getElementById('checkbox-poster-'+poster).checked
  dropdown.style.display = checked ? 'block' : 'none' 
}

Then call it like this:个

onclick="togglePoster('somePosterName');"

确保您的复选框命名一致，前缀类似于‘eckbox-poster-’，如下所示:

<input id="checkbox-poster-somePoster1" ...
<input id="checkbox-poster-somePoster2" ...
<input id="checkbox-poster-somePoster3" ...

将相同的命名逻辑应用于其他元素.

Javascript相关问答推荐

React中的表格中 Select Radio按钮

使用JavaScript/PHP将二维码保存为服务器端的图像

Webpack将懒惰加载的模块放入主块中

v-textfield的规则找不到数据中声明的元素

是什么原因导致此Angular 16应用程序中类型错误时属性结果不存在？

网页自检测外部元素无法加载

InDesign—创建一个独立的窗口，在文档中进行更正时保持打开状态

为什么按钮会随浮动属性一起移动？

如何从隐藏/显示中删除其中一个点击？

是什么导致了这种奇怪的水平间距错误(？)当通过JavaScript将列表项元素追加到无序列表时，是否在按钮之间？

如何将innerHTML字符串修剪为其中的特定元素？

使用js构造一个html<；ath&>元素并不能使其正确呈现

如何在Svelte中从一个codec函数中调用error()？

使用getBorbingClientRect()更改绝对元素位置

当用户点击保存按钮时，如何实现任务的更改？

JS Animate()方法未按预期工作

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

将嵌套数组的元素乘以其深度，输出一个和

未捕获语法错误：Hello World中的令牌无效或意外

为什么NULL不能在构造函数的.Prototype中工作

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630