当前位置: 代码迷 >> Web前端 >> checkbox 施用实例
  详细解决方案

checkbox 施用实例

热度:127   发布时间:2012-11-08 08:48:11.0
checkbox 应用实例

应用实例:

<%@ page contentType="text/html; charset=utf-8" language="java"
buffer="18kb"%>
<html>
<head>
?? <title>CheckBox_Application</title>
</head>
<body>
?? <table id="table1">
??? <tr>
???? <th><input type='checkbox' onclick='javascript: checkAll(this)'>全选</th>
??? </tr>
??? <tr>
????? <td><input type='checkbox' value="汽车" title="car" onclick="callCheck(this)">
??????????? <a onclick="linkDetail('汽车')" style="cursor:hand">汽车</a></td>
??? </tr>
??? <tr>
????? <td><input type='checkbox' value="房子" title="house" onclick="callCheck(this)">
??????????? <a onclick="linkDetail('房子')" style="cursor:hand">房子</a></td>
??? </tr>
??? <tr>
?????? <td><input type='checkbox' value="朋友" title="friends"?? onclick="callCheck(this)">
??????????? <a onclick="linkDetail('朋友')" style="cursor:hand">朋友</a></td>
??? </tr>
??? <tr>
?????? <td><input type='checkbox' value="亲人" title="famaliy"?? onclick="callCheck(this)">
???????????? <a onclick="linkDetail('亲人')" style="cursor:hand">亲人</a></td>
??? </tr>
?? </table>
?? <br>
?? <input type="text" name="context" size="100">
?? <input type="hidden" name="contextTemp" size="100">
</body>
<script type="text/javascript" language="javascript">???????
?? function checkAll(o) {
??? var mytable = document.getElementById("table1").getElementsByTagName("input");
??? if(o.checked){//在进行全选时,把以前单独选中的数据清除,避免重复
???? document.getElementById("contextTemp").value = "";
???? document.getElementById("context").value = "";???
??? }
??? for(var i=1,ci;ci=mytable[i++];) {?????????
???? ci.checked = o.checked;
???? callCheck(ci);
??? }????????
?? }
??
?? function callCheck(obj){
?? var initVal = "您选择了:";
?? var contectTemp = document.getElementById("contextTemp").value;
?? var opVal = obj.value;
?? if(obj.checked){//选中的数据项
?? ?? if(contectTemp==""||contectTemp==null){
?? ??? contectTemp = opVal;
?? ?? }else{
?? ??? contectTemp+=";"+ opVal;
?? ?? }
?? }else{//取消选中项
???? contectTemp = contectTemp.replaceAll(opVal+";","");
?? ?? contectTemp = contectTemp.replaceAll(";"+opVal,"");
?? ?? contectTemp = contectTemp.replaceAll(opVal,"");
??? }
?? if(contectTemp!=""&&contectTemp!=null){//当有选中项时,根据规则把选中内容写到内容框中
???? document.getElementById("contextTemp").value = contectTemp;
?? ?? document.getElementById("context").value = initVal + contectTemp;
?? }else{//当所有项都取消,同时初始化内容框
?? ?? document.getElementById("contextTemp").value = "";
?? ?? document.getElementById("context").value = "";
?? }
?? }
?? String.prototype.replaceAll = function(s1,s2){
?? return this.replace(new RegExp(s1,"gm"),s2);
?? }???
?? function linkDetail(name){
??? alert("弹出有关:"+name+"的信息!");
?? }
</script>
</html

?

  相关解决方案