彼岸~流觞 2018-10-06 07:58 采纳率: 100%
浏览 1655
已采纳

js/jq判断列表中的CheckBox是否选中

js/jq判断列表中的CheckBox是否选中，并把checked==true的CheckBox替换成开启的图片，checked==false的CheckBox替换成关闭的图，帮帮忙各位

  • 写回答

3条回答 默认 最新

  • 天际的海浪 2018-10-06 08:47
    关注

    判断CheckBox是否选中可以用
    jquery:
    if (jqobj.prop("checked")) {}
    原生js:
    if (obj.checked) {}

    如果你只是要把CheckBox替换成图片只用css就可以

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]+span {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url("关闭的图片.png") no-repeat;
}
input[type="checkbox"]:checked+span {
    background: url("开启的图片.png") no-repeat;
}
</style>
</head>
<body>
    <label><input type="checkbox" /><span></span>文字</label>
    <label><input type="checkbox" /><span></span>文字</label>
    <label><input type="checkbox" /><span></span>文字</label>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • 华清远见-重庆中心-前端阶段技术总结/个人总结
    2022-12-21 18:42
    三分狂热者的博客 简介 特征 两种类型 弱类型 解释型 JS的作用 JS的注释 JS的组成 1.ECMAScript 2.BOM 3.DOM JS中的本地对象 数组Array 日期Date 字符串 正则表达式 Math 函数function 事件 给节点添加事件 常用事件 event对象 ...
  • 华清远见-重庆中心-HTML/CSS/JS/JQUERY技术总结
    2022-12-21 17:33
    T遗落的博客 CSS、HTML、JavaScript、jquery的介绍以及相关的使用
  • js和jq实现全选反选
    2020-06-25 13:00
    会做饭的技术男的博客 } } jq实现方法: 是不是觉得js实现起来特别的繁琐,没关系,我们有更加简单的实现办法,那就jq来实现 $(function() { //实现全选反选 $("#theadInp").on('click', function() { $("tbody input:checkbox").prop(...
  • jQuery核心技术
    2021-01-24 06:30
    云计算&大数据的博客 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript...
  • HTML、CSS、JavaScript、jQuery
    2022-04-18 16:18
    北木桥溪的博客 CSS: 用于修饰、渲染网页的一门技术 HTML+CSS可以开发一个非常美观、非常漂亮的网页 开发网页 盖房子 HTML标签搭建网页的结构 砖块(搭建房子的结构) CSS属性 石灰、油漆等涂料 1.1. HTML概述 1.1.1. HTML是什么 HTML...
  • jqGrid中文教程与实践大全（第一部分）
    2025-05-16 21:45
    小虾汉斯的博客 jqGrid 是一个非常流行的开源 JavaScript 插件，广泛用于以网格形式展示、搜索和管理表格数据。它具有高度的可定制性和强大的功能，支持分页、排序、搜索以及多选等特性，非常适合用于复杂数据的管理界面。Struts2是...
  • Spring+SpringMVC+MyBatis+JQ+BootStrap练习
    2022-07-25 17:31
    hrui0706的博客 技术架构:视图层(view):展示数据,与用户交互. html:静态页面,css:美化页面,js动态显示页面,jsp其实就是servlet但是因可以动态交互页面 传值你说属于前端就属于前端吧控制器(Controller):控制业务处理流程(接收请求,...
  • js前端
    2020-12-23 17:39
    仙儿ing的博客 小程序开发：初识小程序、创建小程序，MINA 框架介绍、wxml、wxss、pages 逻辑层 js 介绍，绑定数据、绑定属性、条件判断、循环渲染，小程序中的事件、方法、事件对象、方法传值、获取 data 数据、修改 data 数据、...
  • 前端HTML+CSS+JS+JQuery+Ajax_JSON
    2021-10-06 15:13
    香水pro的博客 前端HTML+CSS+JS+JQuery+Ajax_JSON01_HTML一、HTML简介1.1、什么是HTML1.2、HTML基本结构1.2.1、如何编辑1.2.2、第一个HTML1.2.3、如何运行1.2.4、HTML书写规范二、HTML头部2.1、说明2.2、内部常见元素2.2.1、title...
  • jQ625无解析
    2018-06-25 19:29
    CRGYSSE的博客 A、srcB、linkC、locationD、js在jQuery程序中，（ D ）是jQuery的缩写。A、jq()B、#()C、&amp;()D、$()在jQuery程序中，（ C ）是一个jQuery对象，表示当前引用的HTML元素对象。A、selfB、$(self)C、$(this)D、...
  • 前端面试题 HTML、CSS、JS、Vue、Es6
    2018-10-26 20:25
    我是星星啊的博客 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 外边距、内边距、边框有几种书写形式,列举说明。 参考：http://wangye.huseoblog.com/cssdivhezi.html 有上下两个div，上一个div 设置margin-...
  • 没有解决我的问题, 去提问