如何让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制作简单的导航栏效果——悬停改变
  • 热门搜索
    张家界旅游社 中国旅游业发展前景 大通旅游 丽水旅游网 湖北武汉旅游景点 文明旅游手抄报 东南亚旅游报价 青岛到海南旅游 江西景德镇旅游攻略 山西旅游职业学院贴吧