<html>
<!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" />
<head>
<script language="javascript" type="text/javascript">
function setAttributes() {
var checkboxList = document.getElementsByTagName("input");
var objDisplay = document.getElementById("box0");
for (var i = 0; i < checkboxList.length; i++) {
if (checkboxList[i].type = "checkbox") {
// checkboxList[i].onclick = setValue;
checkboxList[i].onclick = function setValue() {
var obj = this;
if (obj.type == "checkbox" && obj.checked) {
if (objDisplay.innerHTML.indexOf(obj.value) < 0) {
objDisplay.innerHTML += obj.value;
}
}
else {
objDisplay.innerHTML = objDisplay.innerHTML.replace(obj.value, "");
}
};
}
}
}
function setValue(obj) {
var objDisplay = document.getElementById("box0");
if (obj.type == "checkbox" && obj.checked) {
if (objDisplay.innerHTML.indexOf(obj.value) < 0) {
objDisplay.innerHTML += obj.value;
}
}
else {
objDisplay.innerHTML = objDisplay.innerHTML.replace(obj.value, "");
}
}
</script>
</head>
<body onload="setAttributes()">
<div id="mainbox">
<div id="box0"></div><div id="box1">select</div>
<div id="items" style="">
<input value="1" id="test" type=checkbox />1
<input value="2" id="test" type=checkbox />2
<input value="3" id="test" type=checkbox />3
</div>
</div>
</body>
<script type="text/javascript">
var flag=0;
var oDiv0=document.getElementById("box0");
var oDiv1=document.getElementById("box1");
var oDiv=document.getElementById("items");
oDiv1.onclick=function(){
if(flag==0){
oDiv.style.display="block";
flag = 1;
}
else{
flag=0;
oDiv.style.display="none";
getCheckedValues();
}
}
oDiv0.onclick=function(){
if(flag!=0){
flag=0;
oDiv.style.display="none";
getCheckedValues();
}
}
function getCheckedValues(){
var values = document.getElementsByName("test");
var selectValue="";
for(var i=0;i<values.length;i++){
if(values[i].checked){
selectValue += values[i].value +" | ";
}
}
document.getElementById("box0").innerText=selectValue;
alert(document.getElementById("box0").innerText);
}
</script>
</html>
分享到：
相关推荐
然后在你的JavaScript代码中引入这两个库，并配置Markdown-it解析器以包含Checkbox插件： ```javascript const md = require('markdown-it')(); const markdownItCheckbox = require('markdown-it-checkbox'); md....
3. JavaScript（可选）：虽然"awesome-bootstrap-checkbox"主要依赖CSS实现，但有些高级功能可能需要用到JavaScript。例如，动态改变状态、添加交互效果等。如果需要这些功能，开发者需要查看源代码并了解如何使用...
React复选框树 一个简单优雅的复选框树，用于... node_modules/react-checkbox-tree/src/less/react-checkbox-tree.less node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss 在样式表中包含以
jQuery-Checkbox 是基于流行的JavaScript库jQuery构建的，其目标是提供一种简单易用的方法，使开发者能够快速地为网站添加吸引人的复选框组件。这个插件通过自定义CSS样式和JavaScript事件处理，实现了多种动画效果...
《前端项目：打造美观的复选框与单选按钮——pretty-checkbox深度解析...通过深入理解并运用"pretty-checkbox-master"中的资源，开发者可以创造出更美观、更具吸引力的网页界面，让用户的每一次点击都成为愉快的体验。
总的来说，"mtree1.0-checkbox-tableTree-带复选框树形控件"是一个方便开发者快速构建具有复选框功能的树形表格的JavaScript库。它简化了复杂数据展示和多选操作的实现，提升了用户体验，是Web应用中一个实用的工具...
通过从后端接口获取`checkList`，利用`v-for`循环遍历这个列表，动态生成`form`对象的键（keys），并将它们绑定到`el-checkbox-group`的`v-model`上。例如： ```html <el-form-item :label="item1.name + `：`" v-...
方便大家复制粘贴使用，提高大家的效率。 全端都支持 引入组件即可 <TC-checkbox></TC-checkbox> ...uni_modules/TC-checkbox/components/TC-checkbox/TC-checkbox 以上路径上进行修改即可
例如，可以通过CSS美化`Checkbox`的外观，或者使用JavaScript/AJAX实现更加流畅的交互效果。 通过以上介绍和示例，我们可以看到在ASP.NET中使用C#动态判断`Checkbox`是否被选中的方法以及一些扩展知识点。这些技术...
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown...【前端 HTML+CSS+JavaScript(JS)】DOM练习-checkbox实现全选 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-用户名密码校验（表单校验） 带注释/总结
Vue.js 是一个流行的前端JavaScript框架，它以其轻量级、高效和易用性著称。Element UI 是一套基于 Vue 的组件库，专为构建企业级后台界面设计，提供了丰富的组件和美观的样式。在本项目中，我们关注的是如何利用 ...
在IT领域，尤其是在Android开发中，经常需要处理用户交互，比如多层嵌套的复选框（checkbox）的选中状态管理。这个场景通常出现在数据结构复杂，需要展示层次关系的时候，例如在ListView中嵌套一个Gridview，而...
“lokesh-coder-pretty-checkbox-c225070”这个压缩包文件很可能是“Pretty Checkbox”的某个版本或者示例代码库。通常，这种类型的文件会包含以下内容： 1. CSS文件：库的核心样式文件，包含预设的美化样式。 2. ...
本篇文章将深入探讨"collapsable-checkbox-源码.rar"中的实现原理和技术细节。 首先，我们要理解复选框（Checkbox）的基本概念。复选框是HTML中的一个表单元素，用户可以用来选择或取消选择一个选项。在可折叠复选...
js 实现 两个checkbox互斥问题! 值得下载看看!资源免费,大家分享!!
Aspnet-CheckBoxList.zip,只是一种使用checkboxlistcheckboxlist的简单方法,asp.net是一个开源的web框架，用于使用.net构建现代web应用和服务。asp.net创建基于html5、css和javascript的网站，这些网站简单、快速，...
此属性只能使用 javascript 设置，如下例所示： var cb = document . getElementById ( 'whatever-checkbox' ) ;cb . indeterminate = true ; 不幸的是，人们不能在纯 HTML 中编写相同的内容，因为“不确定”不是一...
查看src/js/TreeData.js以查看示例数据结构。 复选框独立于树。 单击 +/- 图标或树节点的标签将切换子节点。 单击复选框将激活复选框，如果复选框被选中，它将检查所有子项，否则，它只会关闭自己而不是它的子项。 ...
使用 npm install bootstrap-checkbox ： npm install bootstrap-checkbox 安装： yarn add bootstrap-checkbox包含什么bootstrap-checkbox/└── js/ ├── i18n/ │ └── ... ├── bootstrap-checkbox.js └...