时间戳

首页 > 解决方案 > 根据单选按钮选择更改标签文本

jquery - 根据单选按钮选择更改标签文本

问题描述

我正在尝试根据单选按钮的选择来更改表单框的标签。

在搜索互联网并使用多种代码变体进行多次编码尝试之后，我遇到了障碍，因为我似乎没有做任何事情。因此，任何帮助将不胜感激。

这是两个单选按钮

<input type="radio" name="event" id="walkEvent" value="walkEvent"/><label>Walk Event</label>
<input type="radio" name="event" id="otherEvent" value="otherEvent"/><label>Event</label>

这是我要更改的标签

<p><label id="place">Meeting Point/Location: </label><input type="text" name="meeting_or_location"/></p>

这是我到目前为止的脚本

     <script type="text/javascript">

         $(document).ready(function(){

         if ($('#walkEvent').is(':checked')){
             $('#place').text('Meeting Point:');
         }
        else if ($('#otherEvent').is(':checked')){
             $('#place').text('Location:');
         }
        });

    </script>

想法是，如果选择了步行活动单选按钮，则标签“会面点/位置：”变为“会面点：”。相反，如果选择了事件，“会面点/位置：”变为“位置：”

然而，当我使用上面的代码并检查一个单选按钮时，什么也没有发生。

标签： jquery

解决方案

将侦听器绑定到change单击单选按钮时发生的事件：

$('[name="event"]').on('change', function() {
    if ($(this).attr('id') == 'walkEvent') {
        $('#place').text('Meeting point: ');
    } else {
        $('#place').text('Location: ');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="event" id="walkEvent" value="walkEvent"/><label>Walk Event</label>
<input type="radio" name="event" id="otherEvent" value="otherEvent"/><label>Other Event</label>

<p><label id="place">Meeting Point / Location: </label><input type="text" name="meeting_or_location"/></p>

推荐阅读