首页 > 软件开发 > JavaScript >

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

来源:互联网 2023-03-16 23:58:58 版权归原作者所有,如有侵权,请联系我们

在html网页开发中,我们经常使用到input radio单选控件,如果我们为每个单选控件配上一个图片,如何实现点击图片时,让单选控件选中?使用js来控制就行了,下面我们来看一下。aiJ办公区 - 实用经验教程分享!

方法/步骤

  • 1

    为了方便操作,我们使用jquery插件库来操作dom,所以先引入对应的脚本文件。aiJ办公区 - 实用经验教程分享!

    如何让input中点击图片选中效果aiJ办公区 - 实用经验教程分享!

  • 2

    在html里添加radio的input控件,并在其后面添加图片控件,每一项放在一个样式为radio_item的div里。aiJ办公区 - 实用经验教程分享!

    如何让input中点击图片选中效果aiJ办公区 - 实用经验教程分享!

  • 3

    然后通过样式选择器,为每一个img图片控件添加点击事件。aiJ办公区 - 实用经验教程分享!

    如何让input中点击图片选中效果aiJ办公区 - 实用经验教程分享!

  • 4

    在点击事件里,调用parent方法来得到img图片的父容器,即它所在的div容器。aiJ办公区 - 实用经验教程分享!

    如何让input中点击图片选中效果aiJ办公区 - 实用经验教程分享!

  • 5

    接着通过find方法,来找到div里的input控件,即单选控件。aiJ办公区 - 实用经验教程分享!

    如何让input中点击图片选中效果aiJ办公区 - 实用经验教程分享!

  • 6

    单选控件找到后,就可以调用它的prop方法来设置它的checked属性了,设置为ture值则是选中状态。aiJ办公区 - 实用经验教程分享!

    如何让input中点击图片选中效果aiJ办公区 - 实用经验教程分享!

  • 7

    打开页面,可以看到每一个单选控件后,都有一个图片,我们可以直接点击图片来选择。aiJ办公区 - 实用经验教程分享!

    如何让input中点击图片选中效果aiJ办公区 - 实用经验教程分享!

  • 7本页面未经许可获取自百度经验
  • 8

    点击后,它前面的单选控件就会自动选中了。aiJ办公区 - 实用经验教程分享!

    如何让input中点击图片选中效果aiJ办公区 - 实用经验教程分享!

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


    标签: HTMLJAVASCRIPTJQUERY

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