【请教】一段代码，点击checkbox传值到input中显示

hgwyl 2020-10-27 02:18:02
先上代码
<!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>JS点击checkbox传值到input</title>

	<meta charset="UTF-8">

	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

<script type="text/javascript">

$("input[name=checkbox]").click(function () {

            if ($(this).attr("checked")) {

                     $("#jsrtxt").val($("#jsrtxt").val() + $(this).parent().text() + ";");

             } else {

                     $("#jsrtxt").val($("#jsrtxt").val().replace($(this).parent().text() + ';', ""));

             }

 });

</script>



</head>

<body>



<input type="text" id="jsrtxt" class="tip" />



<label><input type="checkbox" name="aaa" value="1"/>复选1</label>

<label><input type="checkbox" name="aaa" value="1"/>复选2</label>

<label><input type="checkbox" name="aaa" value="1"/>复选3</label>



</body>

</html>

这是我csdn的一段代码，看上去是符合我需求的。
但是测试时，点击checkbox，相关值并没有(添加/删除)显示到input里面去
请指点~
...全文
865 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
阿狸贝贝 2020-10-28
  • 打赏
  • 举报
 回复 


<!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>JS点击checkbox传值到input</title>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<script type="text/javascript">
function checkedfun() {
    var p = document.getElementById("jsrtxt");
    var str = this.value + ";";
    if (this.checked) {
        p.value += str;
    } else {
        p.value = p.value.replace(str,"");
    }
}
window.onload = function () {
    var arr = document.querySelectorAll("input[name=aaa]");
    for (var i = 0; i < arr.length; i++) {
        arr[i].onclick = checkedfun;
    }
}
</script>
 
</head>
<body>
 
<input type="text" id="jsrtxt" class="tip" />
 
<label><input type="checkbox" name="aaa" value="aaa"/>复选1</label>
<label><input type="checkbox" name="aaa" value="bbb"/>复选2</label>
<label><input type="checkbox" name="aaa" value="ccc"/>复选3</label>
 
</body>
</html>
hgwyl 2020-10-27
  • 打赏
  • 举报
 回复
引用 7 楼 天际的海浪 的回复:
[quote=引用 3 楼 hgwyl 的回复:]其实比较想要一个“原生”的例子，以后容易修改……
原生的 

<!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>JS点击checkbox传值到input</title>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<script type="text/javascript">
function checkedfun() {
	var p = document.getElementById("jsrtxt");
	var str = this.parentNode.innerText + ";";
    if (this.checked) {
        p.value += str;
    } else {
        p.value = p.value.replace(str,"");
    }
}
window.onload = function () {
	var arr = document.querySelectorAll("input[name=aaa]");
	for (var i = 0; i < arr.length; i++) {
		arr[i].onclick = checkedfun;
	}
}
</script>

</head>
<body>

<input type="text" id="jsrtxt" class="tip" />

<label><input type="checkbox" name="aaa" value="1"/>复选1</label>
<label><input type="checkbox" name="aaa" value="1"/>复选2</label>
<label><input type="checkbox" name="aaa" value="1"/>复选3</label>

</body>
</html>
[/quote] 大哥，不好意思啊……趁着你可能在线，多问一嘴 如果是想把checkbox的“值”，传到input去（而不是checkbox的选项） 比如下面的aaa、bbb、ccc <label><input type="checkbox" name="aaa" value="aaa"/>复选1</label> <label><input type="checkbox" name="aaa" value="bbb"/>复选2</label> <label><input type="checkbox" name="aaa" value="bbb"/>复选3</label> JS部分，我应该怎么修改呢？ 试了修改几种，都没成功 （我是JS菜鸟，多多见谅）
hgwyl 2020-10-27
  • 打赏
  • 举报
 回复
结贴时发现原来的20不太够分，加了点。 谢谢回复的4位大哥，分不多，望见谅~~~
hgwyl 2020-10-27
  • 打赏
  • 举报
 回复
引用 7 楼 天际的海浪 的回复:
[quote=引用 3 楼 hgwyl 的回复:]其实比较想要一个“原生”的例子，以后容易修改……
原生的 

<!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>JS点击checkbox传值到input</title>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<script type="text/javascript">
function checkedfun() {
	var p = document.getElementById("jsrtxt");
	var str = this.parentNode.innerText + ";";
    if (this.checked) {
        p.value += str;
    } else {
        p.value = p.value.replace(str,"");
    }
}
window.onload = function () {
	var arr = document.querySelectorAll("input[name=aaa]");
	for (var i = 0; i < arr.length; i++) {
		arr[i].onclick = checkedfun;
	}
}
</script>

</head>
<body>

<input type="text" id="jsrtxt" class="tip" />

<label><input type="checkbox" name="aaa" value="1"/>复选1</label>
<label><input type="checkbox" name="aaa" value="1"/>复选2</label>
<label><input type="checkbox" name="aaa" value="1"/>复选3</label>

</body>
</html>
[/quote] 完美运行，感谢！！！
天际的海浪 2020-10-27
  • 打赏
  • 举报
 回复
引用 3 楼 hgwyl 的回复:
其实比较想要一个“原生”的例子，以后容易修改……
原生的 

<!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>JS点击checkbox传值到input</title>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<script type="text/javascript">
function checkedfun() {
	var p = document.getElementById("jsrtxt");
	var str = this.parentNode.innerText + ";";
    if (this.checked) {
        p.value += str;
    } else {
        p.value = p.value.replace(str,"");
    }
}
window.onload = function () {
	var arr = document.querySelectorAll("input[name=aaa]");
	for (var i = 0; i < arr.length; i++) {
		arr[i].onclick = checkedfun;
	}
}
</script>

</head>
<body>

<input type="text" id="jsrtxt" class="tip" />

<label><input type="checkbox" name="aaa" value="1"/>复选1</label>
<label><input type="checkbox" name="aaa" value="1"/>复选2</label>
<label><input type="checkbox" name="aaa" value="1"/>复选3</label>

</body>
</html>
hgwyl 2020-10-27
  • 打赏
  • 举报
 回复
引用 4 楼 gqkmiss 的回复:
应该是 type=checkbox，而不是name[/img]
引用 5 楼 阿狸贝贝 的回复:

$("input[type=checkbox]").click(function () {
    if ($(this).is(':checked')) {
      $("#jsrtxt").val($("#jsrtxt").val() + $(this).parent().text() + ";");
    } else {
      $("#jsrtxt").val($("#jsrtxt").val().replace($(this).parent().text() + ';', ""));
    }
  });
谢过两位~~~ 
<!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>JS点击checkbox传值到input</title>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<script src="jquery.js"></script>
<script type="text/javascript">
$("input[type=checkbox]").click(function () {
    if ($(this).is(':checked')) {
      $("#jsrtxt").val($("#jsrtxt").val() + $(this).parent().text() + ";");
    } else {
      $("#jsrtxt").val($("#jsrtxt").val().replace($(this).parent().text() + ';', ""));
    }
  });
</script>

</head>
<body>

<input type="text" id="jsrtxt" class="tip" />

<label><input type="checkbox" name="aaa" value="复选1"/>复选1</label>
<label><input type="checkbox" name="aaa" value="复选2"/>复选2</label>
<label><input type="checkbox" name="aaa" value="复选3"/>复选3</label>

</body>
</html>
代码修改成上面这个样子了，还是没用…咧……
阿狸贝贝 2020-10-27
  • 打赏
  • 举报
 回复 

$("input[type=checkbox]").click(function () {
    if ($(this).is(':checked')) {
      $("#jsrtxt").val($("#jsrtxt").val() + $(this).parent().text() + ";");
    } else {
      $("#jsrtxt").val($("#jsrtxt").val().replace($(this).parent().text() + ';', ""));
    }
  });
gqkmiss 2020-10-27
  • 打赏
  • 举报
 回复
应该是 type=checkbox，而不是name
hgwyl 2020-10-27
  • 打赏
  • 举报
 回复
其实比较想要一个“原生”的例子，以后容易修改……
hgwyl 2020-10-27
  • 打赏
  • 举报
 回复
引用 1 楼 jio可 的回复:
使用了jq要引入jq，在meta下面加入这个 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
先行谢过~~~ 我把文件下载到同个目录中，但是效果还是和原来一样…… T_T 

<!---jquery.js文件已下载到同一个目录--->
<!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>JS点击checkbox传值到input</title>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<script src="jquery.js"></script>
<script type="text/javascript">
$("input[name=checkbox]").click(function () {
            if ($(this).attr("checked")) {
                     $("#jsrtxt").val($("#jsrtxt").val() + $(this).parent().text() + ";");
             } else {
                     $("#jsrtxt").val($("#jsrtxt").val().replace($(this).parent().text() + ';', ""));
             }
 });
</script>

</head>
<body>

<input type="text" id="jsrtxt" class="tip" />

<label><input type="checkbox" name="aaa" value="1"/>复选1</label>
<label><input type="checkbox" name="aaa" value="1"/>复选2</label>
<label><input type="checkbox" name="aaa" value="1"/>复选3</label>

</body>
</html>
jio可 2020-10-27
  • 打赏
  • 举报
 回复
使用了jq要引入jq，在meta下面加入这个 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
Flutter 从入门实践到开发一个APP之UI基础篇
本课程详细讲解 Flutter 中涉及到的视图组件，通过这门课程的学习使得大家能掌握使用 Flutter 来编写跨平台移动客户端应用中的基本布局视图。 本课程涉及到： * flutter 中 MaterialApp 使用精讲 * flutter 中 ...
新手入门请教html（一）
xins HTML简介　　　HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一
Spring+SpringMVC+MyBatis+JQ+BootStrap练习
技术架构:视图层(view):展示数据,与用户交互. html:静态页面,css:美化页面,js动态显示页面,jsp其实就是servlet但是因可以动态交互页面 传值你说属于前端就属于前端吧控制器(Controller):控制业务处理流程(接收请求,接收参数(封装参数,根据不同的请求调用对应 业务层处理,根据处理结果返回响应信息)) servlet(功能可以实现但是很麻烦,一个请求对应一个servlet),SpringMVC用一个共有的
WEB开发文档2 总结
转自：http://blog.donews.com/lvjiyong/archive/2006/06/29/931071.aspx怎样将后台生成的在内存中的图象显示到客户端Microsoft IE WebControls下载地址如何在DATAGRID中使用JAVASCRIPT脚本控制DataGrid中连接到下一页显示数据下载中文名文件时保存文件名乱码问题关于用ASP.net绘图的问题,请大虾指教那
java面试题
Java面试题 一 Java基础阶段 1.1 面向对象 面向对象的特征有哪些方面? 面向对象的特征主要有以下几个方面： 1)抽象：抽象就是忽略一个主题中与当前目标无关的那些方面，以便更充分地 注意与当前目标有关的方面。抽象并不打算了解全部问题，而只是选择其中的一 部分，暂时不用部分细节。抽象包括两个方面，一是过程抽象,二是数据抽象。 2)继承：继承是一种联结类的层次模型，并且允许和鼓励类的重用，它提供了 一种明确表述共性的方法。对象的一个新类可以从现有的类中派生，这个过程称 为类继承。新类继承了原始类的特
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章