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

 时间:2024-10-08 00:33:34

在html网页开发中,我们经常使用到inputradio单选控件,如果我们为每个撮劝丛食单选控件配上一个图片,如何实现点击图片时,让单选控件选中?使用js来控制就行了,下面我们来看一下。

方法/步骤

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制作简单的导航栏效果——悬停改变
热门搜索
城堡图片 龙头图片 干杯图片 成毅图片 少女漫画邪恶帝