如何新增一个珍藏勾选框，点击则到输入框种

Question

如何新增一个珍藏勾选框，与原创的复选框功能相同，点击则到输入框种

<input name="oTitle" type="text" class="css_input" id="oTitle" value="<%=U.vTitle%>" size="60" <%if len(u.vtitle)=0 and lcl_titles=1 then%>onblur="ChkTitle('');"<%end if%><%if len(u.vtitle)=0 and lcl_titles=2 then%>onblur="ChkTitle($('oCid').value);"<%End If%> />
<label>
<input name="oCommend" type="checkbox" value="1" <%If U.vCommend = 1 Then Response.Write "checked='checked'"%> />原创
</label>
<script>
    var checkBox = document.querySelector('input[name="oCommend"]');
    var inputBox = document.querySelector('input[name="oTitle"]');
    checkBox.addEventListener('change', function() {
        if (this.checked) {
            inputBox.value += '【原创】';
        } else {
            inputBox.value = inputBox.value.replace('【原创】', '');
        }
    });
</script>
<label><input name="oCommend" type="checkbox" value="1" <%If U.vCommend = 1 Then Response.Write "checked='checked'"%> /> 推荐</label>
<label><input name="oIsComment" type="checkbox" value="1" <%If U.vIsComment = 1 Then Response.Write "checked='checked'"%> /> 评论</label>
<label><input name="oDisplay" type="checkbox" value="1" <%If U.vDisplay = 1 Then Response.Write "checked='checked'"%> /> 发布</label>

Answer 1

【以下回答由 GPT 生成】

首先，你已经有了一个可行的实现方案。你的HTML代码中已经包含了一个勾选框和一个输入框，并且你的JavaScript代码也可以实现在点击勾选框时在输入框中添加内容的功能。

不过，我注意到你的JavaScript代码使用了querySelector方法来获取元素。querySelector方法返回的是匹配指定选择器的第一个元素，这在你的情况下是有效的。但如果你需要在页面中有多个勾选框和输入框时，querySelector只会返回第一个匹配的元素。如果你想对多个元素应用相同的功能，可以考虑使用querySelectorAll方法，并在遍历元素时应用相同的代码。

如果你想要在页面中新增一个珍藏勾选框，你可以使用以下HTML代码：

<input name="oTitle" type="text" class="css_input" id="oTitle" value="<%=U.vTitle%>" size="60" <%if len(u.vtitle)=0 and lcl_titles=1 then%>onblur="ChkTitle('');"<%end if%> <%if len(u.vtitle)=0 and lcl_titles=2 then%>onblur="ChkTitle($('#oCid').value);"<%End If%> />

<label>
  <input name="oCommend" type="checkbox" value="1" <% If U.vCommend = 1 Then Response.Write 'checked="checked"'%> />原创
</label>
<label>
  <input name="oTreasure" type="checkbox" value="1" />珍藏
</label>

然后，你可以使用以下优化后的JavaScript代码来实现在点击勾选框时在输入框中添加内容的功能：

var checkBox = document.querySelector('input[name="oCommend"]');
var treasureBox = document.querySelector('input[name="oTreasure"]');
var inputBox = document.querySelector('input[name="oTitle"]');

function appendContent(content) {
    inputBox.value += content;
}

function removeContent(content) {
    inputBox.value = inputBox.value.replace(content, '');
}

checkBox.addEventListener('change', function() {
    if (this.checked) {
        appendContent('【原创】');
    } else {
        removeContent('【原创】');
    }
});

treasureBox.addEventListener('change', function() {
    if (this.checked) {
        appendContent('【珍藏】');
    } else {
        removeContent('【珍藏】');
    }
});

这样，当用户点击勾选框时，可以在输入框中添加相应的内容。如果用户取消勾选，相应的内容也会从输入框中删除。

希望这个解决方案对你有帮助！如果你有任何其他问题，请随时问我。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/239124
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：判断两次点击是否跳转到同一页面，若相同则页面数据从缓存中获取，否则调取新的接口
• 您还可以看一下 刘欢老师的从前端到后台，开发一个完整功能的小程序课程中的 搭建与设置服务器域名小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 使用路由导航守卫解决路由变化，页面不刷新的问题中的 路由导航守卫 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^