如何让input中点击图片选中效果

 时间:2024-10-15 11:08:05

1、为了方便操作,我们使用jquery插件库来操作dom,所以先引入对应的脚本文件。

如何让input中点击图片选中效果

2、在html里添加radio的input控件,并在其后面添加图片控件,每一项放在一个皱诣愚继样式为radio_item的div里。

如何让input中点击图片选中效果

3、然后通过样式选择器,为每一个img图片控件添加点击事件。

如何让input中点击图片选中效果

4、在点击事件里,调用parent方法来得到img图片的父容器,即它所在的div容器。

如何让input中点击图片选中效果

5、接着通过find方法,来找到div里的input控件,即单选控件。

如何让input中点击图片选中效果

6、单选控件找到后,就可以调用它的prop方法来设置它的checked属性了,设置为ture值则是选中状态。

如何让input中点击图片选中效果

7、打开页面,可以看到每一个单选控件后,都有一个图片,我们可以直接点击图片来选择。

如何让input中点击图片选中效果

8、点击后,它前面的单选控件就会自动选中了。

如何让input中点击图片选中效果
  • vb6.0简体中文企业版完整版在win8.1的安装技巧
  • 易语言——怎样为窗口添加菜单栏 菜单怎么做
  • Notepad如何创建新窗口
  • VMware10中安装MS-DOS 7.1:[2]安装DOS7.1
  • 用css制作简单的导航栏效果——悬停改变
  • 热门搜索
    关于长征的手抄报 儿童节手抄报简单漂亮 3.8妇女节手抄报 班级公约手抄报 美丽的秋天手抄报 一年级清明节手抄报 少年强则国强手抄报 庆元旦手抄报图片 未来的2035年手抄报简单 关于春节的手抄报图片