选中输入复选框后有条件地使用 JavaScript 显示 HTML

问题描述 投票：0回答：1

我正在修改 HTML 表单，以便在选中“父”框后有条件地显示更多问题子集。我现在的方式工作得很好，但是有没有一种更简单的方法可以做到这一点，这样您就不必像本示例中那样为每个“海报设计”重写函数。某种不专门针对一个 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>

javascript html forms conditional-formatting
1个回答
0
投票

创建一个函数，并一致地命名事物

  1. 创建一个函数来处理某些内容的显示/隐藏
  2. 将参数传递到函数中，以便您可以对许多元素重复使用该函数
  3. 要实现此目的，您必须确保所有元素的命名一致（无论如何，这是一个很好的做法）

示例功能：

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' 
}

然后这样称呼它：

onclick="togglePoster('somePosterName');"

确保对复选框的命名保持一致，并在前面加上“checkbox-poster-”之类的前缀，如下所示：

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

对其他元素应用相同的命名逻辑。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.