checkbox 应用实例

最新推荐文章于 2021-07-14 16:28:00 发布

tanting0912

最新推荐文章于 2021-07-14 16:28:00 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： java javascript ViewUI

本文链接：https://blog.youkuaiyun.com/ting_tan/article/details/84115245

Java 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的复选框应用实例。该实例包含一个全选按钮及多个带链接的复选框，当选择不同的选项时，会在文本框中显示已选项目的汇总信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用实例：

<%@ 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