复选框与文本框传值问题

Web 开发 > JavaScript
收藏 回复
[问题点数：30分，结帖人whn1981]
更多帖子
私信 空间 博客
whn1981
等级
本版专家分：0
结帖率 100%
复选框模式如下(动态循环生成，可能有多个，也可能一个都没有)：
<td><input type="checkbox" value="A" name="seName"/></td>
<td><input type="checkbox" value="B" name="seName"/></td>
<td><input type="checkbox" value="C" name="seName"/></td>
........................................................
文本框模式如下：
<td><textarea name="wbnr" rows="3"></textarea></td>
需要实现如下操作：
选一个，向文本框中加入一个值，中间以逗号隔开（如：Ａ,Ｂ,Ｃ）；
不选，如已经累加，则自动减去（如：Ｂ不选，则上面变为：A,C）；
望各位指教！

只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
whn1981
等级
本版专家分：0
怎么就没个人来回一下呢？难道这问题很难吗？
只看TA 引用 举报 #1得分 0
更多帖子
私信 空间 博客
gray820928
等级
本版专家分：1632
在checkbox上加个onchange事件，然后判断是选中的话就把值给加上，删除的话就把值给减去
只看TA 引用 举报 #2得分 0
更多帖子
私信 空间 博客
yixianggao
等级
本版专家分：25754
勋章
Blank
蓝花 2008年1月 Web 开发大版内专家分月排行榜第三
2007年8月 Web 开发大版内专家分月排行榜第三
Easy, L@_@K

<!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>
  <title> dhtml.checkbox.dynamicShowResult.html </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="yixianggao@126.com" />
  <meta name="keywords" content="javascript" />
  <meta name="description" content="for javascript of csdn region" />
 </head>

 <body>
<table>
    <tr>
        <td><input type="checkbox" value="A" name="seName" />A</td>
        <td><input type="checkbox" value="B" name="seName" />B</td>
        <td><input type="checkbox" value="C" name="seName" />C</td>
        <td><textarea id="wbnr" rows="3"></textarea></td>
    </tr>
</table>
<script type="text/javascript">
<!--
function getCheckBoxListByName(strName)
{
    var colInput = document.getElementsByTagName("input");
    var colChkList = new Object;
    colChkList.length = 0;
    for (var i=0; i<colInput.length; i++)
    {
        if (colInput[i].type.toLowerCase()=="checkbox"
            && colInput[i].name==strName)
        {
            colChkList[colChkList.length] = colInput[i];
            colChkList.length += 1;
        }
    }

    return colChkList;
}

var oResult = document.getElementById("wbnr");
var colChkList = getCheckBoxListByName("seName");
for (var i=0; i<colChkList.length; i++)
{
    colChkList[i].onclick = function() {
        oResult.value = "";
        var arrResult = new Array();
        for (var j=0; j<colChkList.length; j++)
        {
            if (colChkList[j].checked)
            {
                arrResult[arrResult.length] = colChkList[j].value;
            }
        }
        oResult.value = arrResult.join(",");
    }
}


//-->
</script>
 </body>
</html>
只看TA 引用 举报 #3得分 20
更多帖子
私信 空间 博客
hhuangdandan
等级
本版专家分：55
哦学习长见识了
我的网站 指点一下
http://www.bework.com.cn
只看TA 引用 举报 #4得分 0
更多帖子
私信 空间 博客
wengoal
等级
本版专家分：92
同意yixianggao(你我他，三人行必有我师焉！)
只看TA 引用 举报 #5得分 0
更多帖子
私信 空间 博客
whn1981
等级
本版专家分：0
yixianggao高人啊！再请教一下，我的调用方式如下：
但进入页面后需要点两次才有效，这是为什么？难道我调用方式不对？

<table>
    <tr>
        <td><input type="checkbox" value="A" name="seName" onclick="selCheck()"/>A</td>
        <td><input type="checkbox" value="B" name="seName" onclick="selCheck()"/>B</td>
        <td><input type="checkbox" value="C" name="seName" onclick="selCheck()"/>C</td>
        <td><textarea id="wbnr" rows="3"></textarea></td>
    </tr>
</table>
<script type="text/javascript">
<!--
function getCheckBoxListByName(strName)
{
    var colInput = document.getElementsByTagName("input");
    var colChkList = new Object;
    colChkList.length = 0;
    for (var i=0; i<colInput.length; i++)
    {
        if (colInput[i].type.toLowerCase()=="checkbox"
            && colInput[i].name==strName)
        {
            colChkList[colChkList.length] = colInput[i];
            colChkList.length += 1;
        }
    }

    return colChkList;
}

function selCheck()//加了个函数名
{
var oResult = document.getElementById("wbnr");
var colChkList = getCheckBoxListByName("seName");
for (var i=0; i<colChkList.length; i++)
{
    colChkList[i].onclick = function() {
        oResult.value = "";
        var arrResult = new Array();
        for (var j=0; j<colChkList.length; j++)
        {
            if (colChkList[j].checked)
            {
                arrResult[arrResult.length] = colChkList[j].value;
            }
        }
        oResult.value = arrResult.join(",");
    }
}
}


//-->
</script>
只看TA 引用 举报 #6得分 0
更多帖子
私信 空间 博客
whn1981
等级
本版专家分：0
yixianggao麻烦高人再指点一下！
只看TA 引用 举报 #7得分 0
更多帖子
私信 空间 博客
joejoe1991
等级
本版专家分：355
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

 </HEAD>

 <BODY>
<form >
<input type="checkbox" name="chk" value="A">A<br>
<input type="checkbox" name="chk" value="B">B<br>
<input type="checkbox" name="chk" value="C">C<br>

<textarea id="text" rows="5" cols="10"></textarea>
</form>

  <script language="javascript">


function fangfa()
{
var src=event.srcElement;
var value=src.value;
if (src.checked)
{
str+=value;
}else{

str=str.replace(value,"");

}

var arr=str.split("");
var text=document.getElementById("text");
text.value=arr.join(",").toString();
}

var str=new String();
var tagarr=document.getElementsByTagName("input");
for (var i=0;i<tagarr.length ;i++ )
{
tagarr[i].attachEvent("onclick",fangfa);
}
  </script>

 </BODY>
</HTML>
只看TA 引用 举报 #8得分 10
更多帖子
私信 空间 博客
whn1981
等级
本版专家分：0
楼上朋友的方法点一次就有效了，但A或B可能是一句中文，
此方法会在每个汉字前面加一个逗号！
只看TA 引用 举报 #9得分 0
更多帖子
私信 空间 博客
joejoe1991
等级
本版专家分：355
是中文的话 看看有没有什么分隔特征 
再改改var arr=str.split("");这一句话就好了
只看TA 引用 举报 #10得分 0
1 2
收起
收藏 回复
whn1981

等级：

关注 私信 TA的帖子
天易02----多个复选框向一个文本框内传值

图片预览： js代码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...h...

checkbox复选框 与 选中条目 文本框传值问题

2019独角兽企业重金招聘Python工程师标准>>> ...

多选复选框 传值到文本框

<input type="checkbox" name="arrsubid[]" onClick="add_words(this);" value="1" />1 <input type="checkbox" name="arrsubid[]" onClick="add_words(this);" value="2"/>2 <input typ...

JS复选框向一个文本框中传值的多选效果

选择一个复选框，那么这个复选框的值就传到一个文本框中，如果这个文本框里有了就不用加了，没有则加。如果取消选择，则从文本框中取掉传的值。中间以“,”分隔，最后结尾没有“,”分隔符。 <!DOCTYPE ...

小程序批量选中，获取复选框id以及页面传值修改数据

1、这里checkbox有个大坑，本来想用小程序自带复选框，但终究满足不了需求，所以自定义按钮，给予选中及未选中状态再自定义属性绑定事件获取id， 2、直接setData修改数组中的某一项的注意点 效果图： 结果：提交的...

单选框、复选框、文本框的只读设置方法

众所周知，文本框的只读可以设置它的readonly属性来完成，但是对于单选钮和复选框，设置readonly却不能完成只读功能，那应该怎样设置它们的只读属性呢？以下是几种方法：第一种方法：通过这种方法设置后，单选钮和复...

原生js打印阅览复选框不显示问题

 原生js打印预览，主要是阅览时候回出现一些问题，比如复选框传值，√不显示，那么怎么来解决这个问题呢？首先我们看一下效果图：我的页面是vue环境  这是预览状态，√和元页面一致，已经传过来了，首先原生js...

多个复选框向一个文本框内传值

> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>无标题文档title> style type="text/css"> input{ margin-right:3...

Axure RP（九）表单元件(文本框、多行文本框、下拉列表框、列表框、复选框、单选按钮、提交按钮)

一：文本框和多行文本框 文本框直接使用HTML中的<input type="text"/>，而多行文本框直接使用HTML中的<textarea>标签。文本框是用来输入单行文本的，而多行...三：复选框和单选按钮 单选按钮必须为每一个

vue复选框组件自定义对勾_vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解...

最近在公司项目中使用vue2.0做开发，在使用...面对如此简单的需求我第一个想到的就是通过点击事件判断复选框状态，更改文本及css样式，代码如下：点我复选框没有被选中export default {data() {return {ckeck...

同名文本框与同名复选框在传值上的不同.

同名文本框与同名复选框在传值上的不同：1，同名的文本框，假设有五个，名字都为name，那么传到Action中的name数组的长度为五，不论文本框有输入值，name数组长度都为五！（不输入值的话，value为""）2，同名的复选...

获取复选框勾选的值【$.ajax$.post$.each$().each、form的值没传至后台问题、去除字符】

JDK1.7+Tomcat7.0+Eclipse+SSM+Bootstrap（含Bootstrap Table） 【心情很复杂，来一首“预谋”——专为“bug与我的相互伤害”做的歌——"反正它都不...两个forEach数据遍历相同的数据在复选框打钩jsp页面复选框更...

php复选框中获取文本框、密码域、…

复选框能够进行项目的多项选择，浏览者在填写...　复选框一般是多个同时存在，为了便于传值，name的名字可以定义为数组形式： 　在返回页面中可以用count（）函数计算数组的大小，结合for循环语句输出选择的复选框的值

JavaScript-为文本框赋值

我准备了6个文本框，一个单选框，一个复选框，一个按钮，就是为了区分只是为文本框赋值，对其他没有影响，代码如下： 为文本框赋值 2.运行结果如下： 3.接下来就是为文本框赋值...

django通过json格式获取复选框值并处理,后台返回json字符串给前端

一、django通过json格式获取复选框值并处理 1，前端代码 &lt;div class="col-md-10 text-left"&gt; {% for column in article_columns %} &lt;label class="checkbox-inline"...

jsp单选按钮传值传递jsp_jsp+servlet对于单选按钮和复选框取值并且存放到数据库中...

index.jsp请选择性别：男女爱好：玩睡吃confirm.jsp性别：${(list.sex)==1?"checked":""} />男 type="radio" name="sex" value="0"${(list.sex)==0?"checked":""} />女爱好： checked="checked" >...

jsp单选按钮传值传递jsp_jsp 获取checkbox 的ID 然后传值到后台ACTION

checkbox是复选啊亲，你的查询语句是from AirData airData where airData.id='"+id+"'"，也就是说最后只有一个ID，那你为毛要用复选……单选君被你遗忘了么……好吧，就题论题，我就当你用的是复选，首先复选框在...

在Layui 的表格模板中，实现layer父页面和子页面传值交互！

最近，在项目中使用到了layer。layer的弹层组件可以说是非常好用，layer 至今仍作为 layui 的代表作。在项目中，需要实现一个在表格里面点击操作，然后弹出layer层，将父层表格的行值传给子页面，子页面拿到值后，...

php获取复选框、单选框、下拉框的值

 复选框一般是多个同时存在，为了便于传值，name的名字可以定义为数组形式：  在返回页面中可以用count（）函数计算数组的大小，结合for循环语句输出选择的复选框的值  if(($_post[mrbook]!= null)){  ...

jsp弹出框传值问题（一个jsp 点击按钮弹出另一个jsp,选中记录带回数据显示在指定框中）

//将值传给text文本框 function result(form) { var a = document.getElementById("inboxname"); a.value = ""; for (var i = 0; i ; i++) { var e = form.elements[i]; if (e.name == "ifCheck" &&...

点击checkbox 向input 里面传值显示

文本框显示 <input type="text" id="textareashow" name="" class="margin-bottom-10 newbz floatleft"/> check1： <input type="checkbox" data-type="checkbox" data-value="等通知放货(送货)" ...

JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等

JQuery 基础原理 <!DOCTYPE html> <title></title>...

JSP开发之JSP 表单处理（传递 Checkbox 数据&传递所有表单参数）

我们知道，复选框 checkbox 可以传递一个甚至多个数据，所以重要程度就不言而喻了。咱们接下来需要将以下代码保存在test.htm文件中： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &...

python设计程序输出一个带文本框和图像的窗体_设计一个文本框 用户在文本框中输入什么 窗体标题就同步显示...

展开全部要求1.掌握算法的基本概念。2.掌握基本数据结构及其操作。3.掌握基本排序和查找算法。4.掌握逐e68a8462616964757a686964616f...考试内容一、基本数据结构与算法1.算法的基本概念；算法复杂度的概念和...

asp mvc @Html.CheckBox("sel",true) 往后台传值问题

@Html.CheckBox("sel",true) 生成2个输入，而不是一个，这是为什么呢？ &lt;input checked="checked" id="sel" name="sel" type="...hidden"

C#高性能大容量SOCKET并发完成端口例子（有C#客户端）完整实例源码

例子主要包括SocketAsyncEventArgs通讯封装、服务端实现日志查看、SCOKET列表、上传、下载、远程文件流、吞吐量协议，用于测试SocketAsyncEventArgs的性能和压力，最大连接数支持65535个长连接，最高命令交互速度达到250MB/S（使用的是127.0.0.1的方式，相当于千兆网卡1Gb=125MB/S两倍的吞吐量）。服务端用C#编写，并使用log4net作为日志模块； 同时支持65536个连接，网络吞吐量可以达到400M。

2020简历模板合集.rar

2020简历模板合集

数据结构—成绩单生成器

该程序用于生成成绩单，需要用户输入各科成绩，程序将自动生成成绩单（总分、平均分、排名）

从零基础开始用Python处理Excel数据.pdf

首先学习Python的基础知识，然后使用Python来控制Excel，做数据处理。 Excel使用者、Python爱好者、数据处理人员、办公人员等 第1章 python基础 1.1 什么是python？ 1.2 为什么要学习用Python处理Excel表格？ 1.3 手把手教你安装python程序 1.3.1 下载python 1.3.2 安装python 1.3.3 验证是否安装成功 1.4 安装Python集成开发工具PyCharm 1.4.1 下载 1.4.2 安装 1.5 Python的输入与输出

Java基础核心技术：多线程(day16-day17)

本套Java视频完全针对初级学员，课堂实录，自发布以来，好评如潮！Java视频中注重与学生互动，讲授幽默诙谐、细致入微，覆盖Java基础所有核心知识点，同类Java视频中也是代码量大、案例多、实战性强的。同时，本Java视频教程注重技术原理剖析，深入JDK源码，辅以代码实战贯穿始终，用实践驱动理论，并辅以必要的代码练习。 通过20的课程学习，使学员掌握java核心语法、面向对象思想编程、异常处理、IO流、集合类、多线程、网络编程等。

相关热词 c# 系统托盘图标 c#结构体定义 c# 根据网络定位 c# 清除html标签 c# uwp最小化 c#和java的区别 64位转换 c# 十进制 c# 点击保存草稿的实现 c# 如何切换图片 c# 界面 隐藏部分