根据下拉值激活复选框答案

【问题标题】：Activate Checkbox Based upon Drop Down Value根据下拉值激活复选框
【发布时间】：2020-04-01 18:26:20
【问题描述】：

我正在寻找一种 Javascript 解决方案，该解决方案将根据在同一其他地方选择的特定下拉值（在标准 HTML 中，由 SQL 生成）启用（在其中放置检查）表单上的复选框形式。我还没有写任何代码，所以目前这里没有任何代码可以展示。 20 年 4 月 8 日编辑：基于 Giuliano 的出色帮助，我决定添加我放在一起的代码（不起作用），如下所示：

<%
sSQL = "SELECT OrderTypeID, OrderTypeString FROM LookupOrderTypesII"
Set rsOrderTypes = Server.CreateObject("ADODB.RecordSet")
rsOrderTypes.Open sSQL, oConnGlobal, adOpenStatic, adLockReadOnly 
iTotalRecords = rsOrderTypes.Recordcount

If iTotalRecords > 0 Then
%>

<br>
<b>SERVICE/ORDER TYPE:</b>
<br>

<script type="text/javascript">
    let select = document.getElementById("cboOrderType");
    let checkbox = document.getElementById("chkSkipVenueEventDetails");

        select.addEventListener("change", function () {
        checkbox.checked = select.value == "12|LABOR SALES/PAYMENT";
        });
</script>

<select class="rounded" name="cboOrderType" id="cboOrderType">
    <option value="Select One" selected>Select One</option>
    <option value="-9999" <%=IfSelected(iOrderTypeID, "Not Listed-ADD Custom Type")%>>Not Listed-ADD Custom Type</option>
    <%
        Do While Not rsOrderTypes.EOF 

            iOrderTypeID = Trim(rsOrderTypes("OrderTypeID"))
            sOrderTypeString = Trim(rsOrderTypes("OrderTypeString"))
    %>
        <option value="<%=iOrderTypeID%>|<%=sOrderTypeString%>"<%=IfSelected(sOrderTypeString, sOrderTypeString_NewRequest)%>><%=sOrderTypeString%></option>
    <%
        rsOrderTypes.MoveNext
        Loop
    %>
</select>
<% 
    rsOrderTypes.Close
    Set rsOrderTypes = Nothing

End If
%>
'''

The SQL code generates the following code (as viewed in browser source):

'''
<select class="rounded" name="cboOrderType" id="cboOrderType">
    <option value="Select One" selected>Select One</option>
    <option value="-9999" >Not Listed-ADD Custom Type</option>
    <option value="1|WILL CALL">WILL CALL</option>
    <option value="2|DELIVERY ONLY-CUSTOMER RETURN">DELIVERY ONLY-CUSTOMER RETURN</option>
    <option value="3|DELIVERY and PICKUP ONLY (Dry Hire)">DELIVERY and PICKUP ONLY (Dry Hire)</option>
    <option value="4|DELIVERY with SETUP and STRIKE">DELIVERY with SETUP and STRIKE</option>
    <option value="5|DELIVERY with SETUP ONLY-CUSTOMER STRIKES">DELIVERY with SETUP ONLY-CUSTOMER STRIKES</option>
    <option value="6|SHIPPED-CUSTOMER RETURN">SHIPPED-CUSTOMER RETURN</option>
    <option value="7|SUPERVISION ONLY">SUPERVISION ONLY</option>
    <option value="8|CONSULTATION SERVICES">CONSULTATION SERVICES</option>
    <option value="9|EQUIPMENT SALES-WILL CALL">EQUIPMENT SALES-WILL CALL</option>
    <option value="10|EQUIPMENT SALES-SHIPPED">EQUIPMENT SALES-SHIPPED</option>
    <option value="11|COMMISSION SALES">COMMISSION SALES</option>
    <option value="99|TEST ORDER">TEST ORDER</option>
    <option value="12|LABOR SALES/PAYMENT">LABOR SALES/PAYMENT</option>
</select>

这里是复选框 HTML：

<input type="checkbox" name="chkSkipVenueEventDetails" id="chkSkipVenueEventDetails">&nbsp;<strong>Skip Venue & Event Details</strong>&nbsp;&nbsp;

【问题讨论】：

我被禁止回答问题，并且 Stack Overflow 通知我改进这个问题（以及另一个问题），以便我可以再次提问。我正是通过添加我放在一起的所有代码来做到这一点的，但它并没有导致这个反对票消失。我什至看不到谁投了反对票。这非常令人沮丧。这样做的人至少可以通过电子邮件与我联系，并让我知道我需要做些什么来删除这个反对票吗？这正在影响我的生活方式，由于 COVID-19，目前这种生活方式非常微薄。谢谢。

标签： javascript html asp-classic

【解决方案1】：

您可以简单地将事件侦听器添加到选择的“更改”事件中，并根据选择的值更改复选框的“已选中”属性

html:

<html>
 <head></head>
 <body>
  <select id="select">
   <option value="a" selected>something</option>
   <option value="b">check</option>
  </select>
  <label>
   <input id="checkbox" type="checkbox">
   Checkbox
  </label>
  <script>
   let select = document.getElementById("select");
   let checkbox = document.getElementById("checkbox");
   select.addEventListener("change", function () {
     checkbox.checked = select.value !== "a";
   });
  </script>
 </body>
</html>

Try it

【讨论】：

你好朱利亚诺。非常感谢你！在我原来的问题中没有清楚地解释自己是我的错。我实际上是在尝试检查复选框，而不是启用或禁用其使用能力。另外，我将您的代码直接剪切并粘贴到一个新的 HTML 页面中以对其进行测试，但它不起作用。我用
我更新了答案（codepen 也是），如果我理解正确，现在它可以满足您的需求。希望这可以帮助。（顺便说一句，第一个代码不起作用，因为我忘记了 select 元素上的 id）
是的！它现在完全按照我的描述工作。非常感谢你！直到你提到它，我才看到 ID 错误。为什么它在 Fiddle 中起作用？我只是不明白为什么有人因为提出这个问题而对我投了反对票。这让我不想问他们。我有很多关于编码的知识，我已经做了 30 多年的编码员，但我从来没有得到足够的分数去任何地方。
太棒了！它在小提琴中确实有效，因为我没有犯那个错误。但是我认为有人否决了这个问题，因为它非常基本，并且通过一些谷歌搜索您可以自己找到答案。好吧，即使我理解这样做，我也很高兴能提供帮助，也许最好评论您的问题，而不是像有时发生在我身上的那样只投反对票。在网站上搜索可能的重复项也很重要。干杯
感谢您的意见 Giuliano。这是最值得赞赏的。不幸的是，我们当中有些人即使是最基本的代码也很困难，因为它超出了我们的正常专业知识。我主要是 SQL 和 VB 开发人员，这些学科不需要定期使用 Javascript，如果有的话。是的，我在谷歌上搜索了这个问题并搜索了几个小时的答案，然后才在这里提出问题。而且，我真的很想习惯使用这个网站。我认为一个人不应该因为在任何主题上都没有技能而被否决。