【问题标题】:Need help getting a text box to show based on Radio box selection需要帮助根据单选框选择来显示文本框
【发布时间】:2019-08-28 15:09:35
【问题描述】:

我不是开发人员,但我确实喜欢深入研究,在这种情况下,我被要求帮助对旧网站进行一些小改动,我已经完成了大部分工作,比如添加 ReCapchta,但我只是在努力解决一个问题我想添加的东西。

我要做的就是获取一个文本框来显示是否将单选框选择为“其他”,此外,此字段应该是必需的,但前提是显然在上面的单选框中选择了其他。

我尝试了很多东西,主要是基于这篇文章...... Hide/display of 3 textboxes on selection of radio button

但我无法让它工作,它永远不会显示,如果我删除它正确显示的隐藏和显示标签,所以我知道布局等是正确的,它只是让这个 JavaScript 发挥作用。

================================================ =============

位于 Header 中的 JavaScript...

<script type="text/javascript">
$(function() {
    $('input[name="BodyType"]').on('click', function() {
        if ($(this).val() == 'Other') {
            $('#textboxes').show();
        }
        else {
            $('#textboxes').hide();
        }
    });
});
</script> 

================================================ =============

定义单选框的 HTML 表

<table width="900" border="0" cellspacing="0" cellpadding="0">
<td align="center"><span class="tablebodytxt2"><strong>VEHICLE BODY TYPE:</strong></span><br>
    <table>
        <td width="0" align="center" valign="top">
    <span class="tablebodytxt">
        <input type="radio" name="BodyType" required value="Convertible" id="BodyType">Convertible
        <input type="radio" name="BodyType" required value="Coupe" id="BodyType">Coupe
        <input type="radio" name="BodyType" required value="Crossover" id="BodyType">Crossover
        <input type="radio" name="BodyType" required value="Hatchback" id="BodyType">Hatchback
        <input type="radio" name="BodyType" required value="MPV" id="BodyType">Multi-Purpose (MPV)
        <input type="radio" name="BodyType" required value="Pick-Up" id="BodyType">Pick-Up (UTE)
        <input type="radio" name="BodyType" required value="Sedan" id="BodyType">Sedan
        <input type="radio" name="BodyType" required value="Saloon" id="BodyType">Saloon
    <input type="radio" name="BodyType" required value="SUV" id="BodyType">Sports Utility (SUV)
    <br>
    <input type="radio" name="BodyType" required value="Other" id="BodyType">Other: (Please specify below!)</span></label></td>
    </table>

================================================ =============

DIV Header,只有在上面的 Radio Table 中选择了 OTHER 时才会出现此内容...

<div id="textboxes" class="tablebodytxt21" style="display: none">
Specify:<input type="text" required class="formtxt"  hidden="true"/>
</div>

================================================ =============

除非我删除了 Hidden 和 Display 标签,否则它不会显示,我尝试过使用 ID 和 NAME 标签,但没有运气。 :(

【问题讨论】:

  • 仅供参考:我删除了php-tag,因为这个问题不涉及 PHP。发布问题时,仅添加与您的问题相关的标签。
  • 你有调试经验吗?在click事件下添加一个console.log($(this).val()),它是否显示'Other'?如果需要动态添加所需的标签,您可以这样做 document.getElementById("edName").required = true 和 document.getElementById("edName").required = false 所以当它显示时使其为真,当它隐藏使其为假
  • 谢谢,我确实意识到使用 PHP 标记,此页面中涉及 PHP,但它不属于问题的这一部分。
  • 不,我没有调试经验,只是尝试一下,看看,如果你能指出我正确的方向,我会非常乐意学习,这是我不知道从哪里开始的东西\ 我需要什么工具等。
  • 我认为调试这个词实际上可能是我需要听到的全部内容,不是一个网络开发人员,我在解决这个问题时有点卡住了,但是谷歌搜索调试 JavaScript 似乎给了我我需要的东西解决这个问题。

标签: javascript html


【解决方案1】:

感谢所有查看此问题的人,但我设法自己解决了这个问题,我使用了我以前信任的“suck it and see”方法,因为我在自己的代码上尝试使用 Google 调试器时迷路了,哦,好吧。

无论如何我在这里没有得到答案,我在这里重新提出了这个问题:Code to display boxes based on Radio Checkboxes not working

这最终得到了我想要的结果。

基本上它不起作用的原因是我在代码上方和下方尝试了标题和正文中的脚本代码。

但是我没有在身体下方尝试它显然需要坐在它的位置,原因我不明白并且需要调查,无论如何感谢任何看过的人。

希望这个帖子能帮助其他人在未来遇到类似的问题。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多