复选框前端应用

最新推荐文章于 2024-09-06 09:15:36 发布
最新推荐文章于 2024-09-06 09:15:36 发布
阅读量185 收藏
点赞数
分类专栏： javaScript 文章标签： 前端 xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaodeng_java/article/details/84520588
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="Untitled-2.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" language="javascript"  src="../自己成就/jquery-1.3.2.min.js"></script>
 
<script type="text/javascript">

var av="";//表单里面的值
//给input表单赋值
function checkbox(obj){ 

 var a=$("#"+obj).val();//得到复选表单的值
 //如果第二次选择复选表框就在字符后面拼接逗号
  //如果当前复选框为true那么就拼接当前值
  if($("#"+obj).is(":checked")){
   av=av+"|"+a;
  }
  //如果当前复选框为false那么就删除当前值
  if(!$("#"+obj).is(":checked")){
   var b=av.substring(0,av.indexOf(a)-1)+av.substring((av.indexOf(a)+a.length),av.length);
   av=b;
  }
  }
//显示赋值内容
function onblu(){
 $("#avalue").val(av);
 }
</script>

</head>

<body>
<div id="container"><!--页面层容器-->

　　<div id="Header"><!--页面头部-->
 <div id="menu">

          <ul>

            <li><a href="#">首页</a></li>

            <li class="menuDiv"></li>

            <li><a href="#">博客</a></li>

            <li class="menuDiv"></li>

            <li><a href="#">设计</a></li>

            <li class="menuDiv"></li>

            <li><a href="#">相册</a></li>

            <li class="menuDiv"></li>

            <li><a href="#">论坛</a></li>

            <li class="menuDiv"></li>

            <li><a href="#">关于</a></li>

          </ul>

        </div>
　　</div>

　　<div id="PageBody"><!--页面主体-->

　　　　<div id="Sidebar"><!--侧边栏-->
　　　　</div>

　　　　<div id="MainBody"><!--主体内容-->
  <div id="boke">
博客分类：<input type="text" id="avalue" οnfοcus="onblu()"/><br />

        <input type="checkbox" name="che" id="che1" value="生活" οnclick="checkbox(this.id)"/>生活
        <input type="checkbox" name="che" id="che2" value="旅游" οnclick="checkbox(this.id)"/>旅游
        <input type="checkbox" name="che" id="che3" value="学习" οnclick="checkbox(this.id)"/>学习
        </div>
　　　　</div>

　　</div>

　　</div>
</body>
</html>

xiaodeng_java
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
复选框
huangdepei的博客
05-08 3272
这样吧，先给你们看一下成品展示图，这是还没点击上面视图的页面。 额-所谓复选框就是可以多选几个你喜欢的选项。 至于最下面的三个选项就是字面意思 2、接下来就是老样子看js部分啦！哦这次还加上了html的。 这是html的那些选框 <tr> <p><inputtype="checkbox"class="num"name="num"/>足球</p> </tr> <tr> <p>&l...
前端案例-7 复选框全选功能
KathyLJQ的博客
04-10 247
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复选框的应用（全选、反选、全不选效果）
06-03
复选框的应用（全选、反选、全不选效果）
复选框的应用
weixin_30606669的博客
04-12 132
<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script></head><body> <form> ...
复选框应用
wytwin的专栏
02-03 338
本文记录的是复选框的应用，即复选框的全选，反选，全不选等操作，js代码如下： $(function(){  $("#CheckedAll").click(function(){//全选或者全部选框的点击事件   $("input[name=items]").attr("checked",this.checked);//事件主体的选中状态跟所有的复选框的选中状态是一致的，  });
复选框的使用
java开发指南博客 【转载】
04-07 233
前几天在网上看到好多有关复选框的文章，看了好几篇发觉都是转载的几乎全部都是出自一篇文章，转载也就算了，运行了一下代码还是错的。自己都不去验证下就拿出来转载，真的是害人不浅啊，因此我想给大家写篇质量比较高的文章。省得大家被那些烂文章误导。 1.常见的复选框操作 （1）全选 （2）全不选 （3）反选 （4）复选框取值 2.开发的准备 （1） 代码编辑器 （2）jquery开发库 3.页面设...
如何进行复选框的应用—前端小课堂
yunduanaoligei的博客
11-25 499
今天分享下”如何进行复选框的应用—前端小课堂“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 复选框在网页中很是常见，无论是电商网站，还是平台，只有有需要选择的地方就会见到复选的身影。接下来，是我之前写过的两个小demo，都是关于复选框的，希望会给大家带来帮助。 第一个是关于复选框全选反选的操作，当然我在里面还加了一个小功能，就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态；反之亦然。
基于layui的table插件进行复选框联动功能的实现方法
10-16
在现代的Web开发中，复选框联动功能是一个常见的需求，它用于实现一系列相关选项的同步状态变更。...同时，这种自定义的扩展方法不仅限于权限管理的场景，也可以应用于任何需要复选框联动功能的Web应用中。
jquery获取复选框checkbox的值的简单实现方法
10-22
需要注意的是，这种方法可能会将最后一个复选框的逗号也添加到结果字符串中，因此在实际应用中需要对代码进行适当的处理。 2. **jQuery方式**：通过`$('input[name="interest"]:checked')`这个选择器直接定位所有...
layui 监听表格复选框选中值的方法
10-18
在开发Web应用时，经常会遇到需要处理用户交互数据的情况，比如在表格中通过复选框选择数据项。layui是一款优秀的前端框架，提供了丰富的组件和API，使得开发更加便捷。本篇将详细介绍如何在layui中监听表格复选框的...
layui复选框限制选择个数的方法
10-16
上述方法就是利用Layui提供的事件监听和JavaScript的操作来实现对复选框选择个数的限制，这种方式不仅适用于复选框，也可以根据类似的逻辑应用于其他需要限制数量的表单元素。在实际应用中，开发者可以根据需求调整...
利用Bootstrap实现表格复选框checkbox全选
08-31
在本文中，我们将探讨如何利用Bootstrap这一流行的前端框架来实现表格中的复选框全选功能。Bootstrap是由Twitter开发的，它提供了一套响应式布局、移动设备优先的WEB开发工具，使得网页设计更加简单和快捷。 要实现...
复选框的应用2
weixin_30439131的博客
04-12 73
<!DOCTYPE html><html><head> <title>复选框的运用</title> <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script></head><body> <form...
JavaScript前端按钮复选框
abc15156714976的博客
09-27 3602
web-复选框
前端下拉复选框的使用(这里只有讲述新增时获取值以及查看详情时对他进行赋值)...
weixin_30329623的博客
07-29 238
实现效果： 导入js以及css: html代码： js代码： 判断是否为空： //途径省份 var rName = $(".ltlRegionName").val(); $(".ltlRegionName2").empty(); if (rName == null) { $(".ltlRegionName2...
jquery复选框应用
abysstoabyss的专栏
06-21 349
您做喜欢的运动是什么呢？ 足球 跑步 篮球 游泳 html页面如下：* 全选： (“#checkAll”).click(function(event)
网页开发 HTML
最新发布
ultramand的博客
09-06 1191
这个例子中，我使用了多个HTML标签来构建一个包含图像、图表、视频和其他元素的综合页面。// JavaScript代码。
前端复选框 csdn
09-05
前端复选框在CSDN中被广泛应用，尤其在用户选择兴趣、关注的领域或技术方向等方面起到重要作用。在CSDN的网站或APP中，我们经常会见到具有复选框形式的选项，比如选择感兴趣的编程语言、开发框架、数据库等等。通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值