复选框前端应用

xiaodeng_java

于 2014-01-16 14:09:46 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签：前端 xhtml javascript ViewUI

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/xiaodeng_java/article/details/84520588

javaScript 专栏收录该内容

9 篇文章

订阅专栏

<!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" onfocus="onblu()"/><br />

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

　　</div>

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

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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