首页 > 软件开发 > HTML >

js怎样对图片实现checkbox方法

来源:互联网 2023-03-16 19:11:23 170

目前由于H5的广泛使用,对图片实现checkbox方法,已经不需要使用JS方法了,只需要使用label>标签绑定到表单即可wKK办公区 - 实用经验教程分享!

工具/原料

  • HTML5
  • 键盘一套

方法/步骤

  • 1

    新建一个HTML5文档wKK办公区 - 实用经验教程分享!

    js怎样对图片实现checkbox方法wKK办公区 - 实用经验教程分享!

  • 2

    定义一个chebox表单元素,示例:wKK办公区 - 实用经验教程分享!

    input type="checkbox" id="ck1">wKK办公区 - 实用经验教程分享!

    *关键,需要指定IDwKK办公区 - 实用经验教程分享!

    js怎样对图片实现checkbox方法wKK办公区 - 实用经验教程分享!

  • 3

    此时,可以定义一个label>标签绑定到指定ID的标签上,示例:wKK办公区 - 实用经验教程分享!

    label for="ck1">img src="./img/checked.jpg">/label>wKK办公区 - 实用经验教程分享!

    *关键,for属性,需要与input的id属性一致wKK办公区 - 实用经验教程分享!

    js怎样对图片实现checkbox方法wKK办公区 - 实用经验教程分享!

  • 3本页面未经授权抓取自百度经验
  • 4

    按照以上方法,再创建两个checkbox表单wKK办公区 - 实用经验教程分享!

    js怎样对图片实现checkbox方法wKK办公区 - 实用经验教程分享!

  • 5

    保存以上文件,在浏览器预览效果,wKK办公区 - 实用经验教程分享!

    js怎样对图片实现checkbox方法wKK办公区 - 实用经验教程分享!

  • 6

    直接点击图片,就可以实现checkbox的选中和取消选中了wKK办公区 - 实用经验教程分享!

    js怎样对图片实现checkbox方法wKK办公区 - 实用经验教程分享!

  • 注意事项

    • 图片实现checkbox方法,已经不需要JS技术了
    • 喜欢此经验,请投票和点赞

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


    标签: HTML

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