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

时间:2019-04-27 10:41:14

标签: jquery

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

在遍历Internet并尝试使用多种代码变体进行多次编码尝试之后,我遇到了麻烦,因为我似乎无能为力。因此,任何帮助将不胜感激。

这是两个单选按钮

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

这样的想法是,如果选择了“步行事件”单选按钮,则标签“会议点/位置:”将变为“会议点:”。相反,如果选择“事件”,则“交汇点/位置:”将变为“位置:”

但是,当我使用上面的代码并选中单选按钮时,什么也没发生。

2 个答案:

答案 0 :(得分:1)

将监听器绑定到SecondDataModel事件,该事件在您单击单选按钮时发生:

setPastCell(cell: WeekCell, data_dic: FirstDataModel)
change

答案 1 :(得分:1)

您可以为此使用click事件,希望这会有所帮助

$("input[name='event']").click(function(){
            var radioValue = $("input[name='event']:checked").val();
            if(radioValue=="walkEvent")
            $('#place').html('Meeting Point')
            else
            $('#place').html('Location')
            
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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>