首页 > 软件开发 > JQUERY >

如何使用jquery方法控制单选按钮的某一个被选中

来源:互联网 2023-03-17 00:46:48 360

在form表单中,单选按钮radio也是常有的一种组件,这种组件一般情况下只能进行单选,也可以多选。如果一组单选按钮中添加了name属性,并且值都一样的话,只能是单选。下面利用实例说明,操作如下:1Kq办公区 - 实用经验教程分享!

如何使用jquery方法控制单选按钮的某一个被选中1Kq办公区 - 实用经验教程分享!

工具/原料

  • jquery
  • CSS3
  • HTML5
  • HBuilder
  • 浏览器
  • 截图工具

方法/步骤

  • 1

    第一步,由于这次使用到jquery,所以在新建的静态页面插入这个文件,如下图所示:1Kq办公区 - 实用经验教程分享!

    如何使用jquery方法控制单选按钮的某一个被选中1Kq办公区 - 实用经验教程分享!

  • 2

    第二步,在div>/div>标签内插入三个单选按钮,并且有对应的label,如下图所示:1Kq办公区 - 实用经验教程分享!

    如何使用jquery方法控制单选按钮的某一个被选中1Kq办公区 - 实用经验教程分享!

  • 3

    第三步,接着给第一个单选按钮添加checked属性,默认是被选中,如下图所示:1Kq办公区 - 实用经验教程分享!

    如何使用jquery方法控制单选按钮的某一个被选中1Kq办公区 - 实用经验教程分享!

  • 4

    第四步,保存代码并在浏览器中预览效果,可以发现单选按钮三个可以同时选中,如下图所示:1Kq办公区 - 实用经验教程分享!

    如何使用jquery方法控制单选按钮的某一个被选中1Kq办公区 - 实用经验教程分享!

  • 4相关内容未经许可获取自百度经验
  • 5

    第五步,接着给三个单选按钮添加name属性,并且name属性值都是一样的,如下图所示:1Kq办公区 - 实用经验教程分享!

    如何使用jquery方法控制单选按钮的某一个被选中1Kq办公区 - 实用经验教程分享!

  • 6

    第六步,最后在jquery初始化函数内,添加选中单选按钮的方法,如下图所示:1Kq办公区 - 实用经验教程分享!

    如何使用jquery方法控制单选按钮的某一个被选中1Kq办公区 - 实用经验教程分享!

  • 注意事项

    • 注意如何设置单选按钮只能单选的方法
    • 注意设置单选按钮被选中的方法

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!1Kq办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码