【请教一段代码的细节】JS中获取php变量并赋值

hgwyl 2020-10-29 08:10:02

下面这段代码，是之前咨询过的一段。
作用是点击checkbox选中/取消选中后，在input中显示对应的选项。
能正常使用。

<!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="a1"/>复选1</label>

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

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



</body>

</html>

现在想请教的是：
1、代码开头添加<?php $moren="a2,a1,"; ?>
2、并且给对应的checkbox添加checked
——相当于默认选中a2和a1
如下



<?php $moren="a2,a1,"; ?>

<!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="a1"/ checked>复选1</label>

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

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



</body>

</html>

劳烦帮敲一下代码，抱拳感谢~

...全文

1244 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

hookee 2020-10-30

打赏
举报

<?php $moren="a2,a1,"; ?>

...

window.onload = function () {

    var arr = document.querySelectorAll("input[name=aaa]");

    var v = ",<?php echo $moren?>,";

    for (var i = 0; i < arr.length; i++) {

        arr[i].onclick = checkedfun;

        var item = "," + arr[i].value + ",";

        if (v.indexOf(item) != -1)  arr[i].checked = true;

    }

}

hgwyl 2020-10-30

打赏
举报

呃……那个什么，是我自己搞错了。在赋值时，没有注意变量值。所以认为<input type="text" id="jsrtxt" value="<?php echo $moren?>" class="tip" />没用。重新测试了一下，这是有用的。

hgwyl 2020-10-30

打赏
举报

引用 1 楼 hookee 的回复:

<?php $moren="a2,a1,"; ?>
...
window.onload = function () {
    var arr = document.querySelectorAll("input[name=aaa]");
    var v = ",<?php echo $moren?>,";
    for (var i = 0; i < arr.length; i++) {
        arr[i].onclick = checkedfun;
        var item = "," + arr[i].value + ",";
        if (v.indexOf(item) != -1)  arr[i].checked = true;
    }
}

先谢过~~~ 我复制了代码过去，但是运行没有反应。由于技术不行，我也没看懂新增加这些代码的意思…… 我原始的想法，是把PHP变量$moren的值，放入到<input type="text" id="jsrtxt" class="tip" />中。直接写页面是可以，但是怎么把赋值给JS这个却不会。 <input type="text" id="jsrtxt" value="<?php echo $moren?>" class="tip" />