【请教】一段代码，点击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里面去
请指点~

...全文

977 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>