radio单选按钮选中时当前页面实现跳转

最新推荐文章于 2022-12-22 11:55:37 发布
最新推荐文章于 2022-12-22 11:55:37 发布
阅读量8.6k 收藏 15
点赞数 1
分类专栏： JS 文章标签： radio 当前页面跳转 js实现页面跳转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maple_fix/article/details/75045422
版权
本文介绍了一种使用JavaScript实现radio单选按钮选中时在当前页面跳转的方法。通过监听input[type=radio][name=chart]的change事件，根据不同的value值，利用window.location.href更改页面URL，分别跳转到'overallSituation'、'interfaceUse'和'areaSituation'等页面。
摘要由CSDN通过智能技术生成

例如下面是一个单选的span片段：

<span style="width: 500px;">

<input type="radio" name="chart" value="overAll" checked="checked"/>总体概况
<input type="radio" name="chart" value="interfaceUse"  style="margin-left:35px"/>利用统计 
<input type="radio" name="chart" value="area" style="margin-left:35px"/>地区统计

</span> 

当改变checked属性时在当前页面实现跳转js实现如下：

$('input[type=radio][name=chart]').change(function() {
       if (this.value == 'overAll') {
           window.location.href="${page

最低0.47元/天 解锁文章
maple_fix
关注
专栏目录
选择单选按钮跳转页面
weixin_48129874的博客
05-14 1294
选择单选按钮跳转不同页面 黑粉黑底很厚的
html之radio选中和button onclick 跳转页面
smallnetvisitor的博客
05-22 1595
需求： html的radio根据需求选中，button onclick 跳转页面 实现： html之radio选中: &lt;input type="radio" name="type" value="about" ${nav.type=='about'?'checked':''}&gt; button onclick 跳转页面: &lt;input class="csrbutto...
根据radio选择的不同，跳转到不同的页面
cherry_chenrui的博客
08-30 1万+
在各种各样的应用当中，我们的身份不同，会有不同的职能权限，能干不同的事情。 当在登录的时候，所选择的身份不同，跳转到的页面也不同。 之前发现在jquery中$.post提交之后不能在servlet（controller）里面进行request.getRequestDispatcher(url).forward(request,response);进行页面的跳转。 所以只能用form表单进行提
点击radio跳转到另一个页面
Cedar's Columnists
02-25 1641
点击单选按钮实现页面跳转
05-19 511
<input type="radio" name="radiobutton" value="radiobutton" onclick="javascript:location.href='http://www.baidu.com'" /> 转自:http://topic.csdn.net/u/20100519/16/19d09072-6675-4794-...
html根据radio跳转不同网站_自适应网站优化问题之移动适配
weixin_29662775的博客
12-22 279
适应网站如何做移动适配？是否需要做移动适配？下面我们就来解决这个问题。首先，百度站长平台有这么一篇文章关于移动搜索：http://zhanzhang.baidu.com/college/courseinfo?id=156&page=3#h2_article_title0里面提及：问：百度移动搜索对我的移动站收录较少，该如何做？答：1. 如果您同时具有PC站，且PC与移动站是一一对...
radio php mysqladmin 数据库 单选 跳转页面,点击不同Radio显示不同内容 Radio单选框切换代码...
weixin_36273006的博客
03-12 627
点击不同Radio显示不同内容 Radio单选框切换代码，找这个东西用了我好几个小时，就是不知道叫什么名字，突然想起来见到过这种效果，在那个页面见到过的也想不起来了，项目中需要用到这个，自己JS这块又不好，所以就狂找。功夫不负有心人，终于还是给我找到了。本来找到了两份，其中一份前几天发过，PHP 选中单选按钮后显示其他表单元素不过此文中的效果实现起来太简单了，纯HTML+CSS,而且Radio选...
javascript实现点击单选按钮链接转向对应网址的方法
10-23
在网页设计中，如何通过点击单选按钮实现页面的跳转是一个常见的需求。这种方法对于制作问卷调查、在线选择题或者是多页面表单等应用场景非常有用。传统的超链接形式虽然能够实现页面间的跳转，但若要根据不同选择...
Android开发单选按钮功能,android实现单选按钮功能
weixin_36314050的博客
05-25 1140
在我们平时在注册个人信息的时候，经常会让我们选择是男生还是女生，那么这个单选框在Android中是怎么实现的呢？现在我们就来学习一下吧首先我们要明白实现这样一个效果需要哪几部？1、在layout布局文件中建立一个文件，我起的名字为activity_radio.xml代码为：android:layout_width="match_parent"android:layout_height="match...
js表单元素checked、radio被选中的几种方法(详解)
01-21
0、环境 <input type=”checkbox”  value=”lol”/>lol var lol = document.getElementsByTagName(“input”)[0]; 1、HTML DOM a.lol.checked = true; 属性的值可以不是lol，只要转为布尔值的时候为true就可以，取值时只有true、false两种 不会增加checked标记 b.lol.click(); 不会增加checked标记，这时lol.checked的值为true 2、DOM core lol.setAttribute(“checked”,”checked”); 元素增加了
radiogroup中radiobutton实现activity跳转
努力学习积极向上好青年的学习基地
12-22 268
button实现activity跳转
点击单选按钮radio后面的文字即可选中单选按钮
热门推荐
w__yi的专栏
05-02 3万+
关键字：radio 单选按钮 文字 选中       有时候我们在网页中填写某些表单时，可能会遇到单选按钮，如让你选择性别是男或是女，此时用户往往会去点击单选按钮那个小小的圆圈，由于单选按钮比较小，可能会点不到，所以最好是点击单选按钮后面的文字就能直接选中单选按钮。   input type="radio" id="male" name="sex" checked="checked"
html怎么控制单选按钮,html radio单选按钮JS脚本控制
weixin_30322969的博客
06-30 659
html radio单选按钮JS脚本控制 raido式input type='radio' name='test' value='v1' / 使用JS脚本判断是否有name为test的radio被选中，并alert选中radio的。 function checkradio(){ var test=document.getElementsByName(test);//这里得到name为test的元素...
点击radio之后，跳转页面，再返回，该radio无法点击
Number_One_2015的博客
09-10 306
原因大概有几点： 1.有三个radio，但是我没有使用<el-radio-group> 2.<el-radio>我有添加CSS class ，导致有覆盖，无法点击； 解决如下： 1. 加入<el-radio-group>，并且设置v-model，@change="portalTypeChange" <el-radio-group v-model="portalType" @change="portalTypeChange"> 2.remove.
跳转到下一页面时，必须先勾选阅读xx须知/协议才可跳转功能
weixin_30244889的博客
08-11 2590
当跳转到新的html页面时，先判断checkbox是否选中，选中-->跳转到新页面；未选中--弹出提示消息（请先同意须知） HTML： 1 <div class="choose"> 2 <input class="check checkSty" id="agreeOrNot" type="checkbox"/> 3 <div ...
判断单选框选中状态，做出操作
weixin_34272308的博客
03-27 1463
2019独角兽企业重金招聘Python工程师标准>>> ...
Android 使用单选按钮制作底部导航，并点击实现跳转到不同的Frame中
qq_52211982的博客
12-21 748
1、xml文件为：其中 隐藏单选按钮的初始标识，有一个android:button="@null"这个属性即可隐藏，然后配合Java代码设置其标识图标。 <FrameLayout android:id="@+id/Frame_ID" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="
FM收音机 RDS的强大功能
tanxs001的专栏
07-18 4806
前言   随着发展，会有越来越多的电台具有RDS广播功能，RDS可以显示电台名称、节目类型、节目内容、日期时间及其它信息，而它具有的AF和TA功能，则更强大。   通常一个广播电台想扩大它的覆盖率，可能会进行多个频率点的发射，比如某个电台有87.8和95.8MHZ两个频点，当你开着车听着87.8，去到某个地方时，信号变差了， 这时候，开了AF功能，AF功能会自动搜索当前电台的其他频道，找到
pyqt5选中radioButton后，点击pushButton进入相应的页面代码
最新发布
09-10
在PyQt5中，你可以通过信号（Signals）和槽（Slots）机制来实现这种功能。首先，你需要创建两个`QObject`派生类，一个用于表示按钮（QPushButton）和另一个用于表示单选按钮（QRadioButton）。当单选按钮被选中时，触发一个信号；然后在主窗口或其他类中设置槽函数，当接收到这个信号时跳转到相应的页面。 这是一个简单的示例： ```python import sys from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QStackedWidget, QPushButton, QRadioButton class RadioButton(QWidget): # 创建一个信号，当单选按钮被选中时发出 radioButtonClicked = pyqtSignal() def __init__(self, text): super().__init__() self.radio_button = QRadioButton(text) self.layout = QVBoxLayout() self.layout.addWidget(self.radio_button) self.radio_button.clicked.connect(self.on_click) self.setLayout(self.layout) def on_click(self): self.radioButtonClicked.emit() # 触发信号 class PageSwitcher(QWidget): def __init__(self): super().__init__() self.stack_widget = QStackedWidget() # 添加你要切换的页面 page1 = QWidget() page1_label = QLabel("这是第一页") self.stack_widget.addWidget(page1) page2 = QWidget() page2_label = QLabel("这是第二页") self.stack_widget.addWidget(page2) button1 = QPushButton("去第一页") button2 = QPushButton("去第二页") for btn in [button1, button2]: btn.clicked.connect(self.show_page) # 设置槽函数处理按钮点击 layout = QVBoxLayout() layout.addWidget(self.stack_widget) layout.addWidget(button1) layout.addWidget(button2) self.setLayout(layout) def show_page(self, sender): # 槽函数 if isinstance(sender, QPushButton): index = 0 if sender.text() == "去第一页" else 1 self.stack_widget.setCurrentIndex(index) # 切换到对应的页面 if __name__ == "__main__": app = QApplication(sys.argv) main_window = PageSwitcher() radioButton = RadioButton("选择") # 创建单选按钮实例 main_window.show() radioButton.show() sys.exit(app.exec_()) ``` 在这个例子中，当你点击单选按钮时，它会发送一个信号。PageSwitcher类监听这个信号，并根据信号的内容切换QStackedWidget中的当前页面。点击PushButtons时直接切换堆叠视图内的页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值