[英]Changing label text based on radio button selection
我正在尝试根据单选按钮的选择更改表单框的标签。
搜寻互联网并尝试使用多种代码变体进行多次编码尝试后,我遇到了麻烦,因为我似乎无能为力。 因此,任何帮助将不胜感激。
这是两个单选按钮
<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>
其想法是,如果选择了“步行事件”单选按钮,则标签“ Meeting Point / Location:”(会议点/位置:)将变为“ Meeting Point:”。 相反,如果选择了“事件”,则“交汇点/位置:”将变为“位置:”
但是,当我使用上面的代码并检查单选按钮时,什么也没有发生。
绑定侦听器以change
单击单选按钮时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>
您可以为此使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.