使用javascript将复选框值推送到当前数组列表值

时间:2017-11-24 11:27:03

标签: javascript html checkbox

我想将从复选框中选择的值列表推送到已有数组值列表的文本框中......我的意思是当检索到数据时,文本框有其值(检索到的值)选中复选框)......当我选择新的复选框值并将其推送到检索到的值时......文本框仅显示新选择的复选框值(旧的复选框值被删除)。 ........我希望文本框显示旧的检索值和当前选中的复选框值,并选中复选框



var pc = [];

function getPc(myname1) {
	
	
	var text1 = myname1;
	
	
	if (document.getElementById(myname1).checked){
	
	
		pc.push(myname1);
	    
	}
	else 
		{
	    pc.splice( pc.indexOf(myname1), 1 );
		
		}
       console.log(pc);
	document.getElementById("pca").value = pc.join("/");
		
	
	
	}

<body onload="getpc()">
<p>Product Categories</p>
             <input type="text" class="form-control" id="pca" name="pc" form="form1" onclick="getPc()" value="myname1/check2/check3">
             
<input type="checkbox" name="myname1" id="myname1" onclick="getPc(this.id)"  checked>
<input type="checkbox" name="check2" id="check2" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check3" id="check3" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check4" id="check4" onclick="getPc(this.id)"  >
<input type="checkbox" name="check5" id="check5" onclick="getPc(this.id)" >
<input type="checkbox" name="check6" id="check6" onclick="getPc(this.id)" >
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

当页面加载时检查选中的复选框并将它们添加到数组中。

var pc = [];

var checkboxes = document.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == "checkbox") {
        if (checkboxes[i].checked) {
            getPc(checkboxes[i].id);
        }
    }
}

function getPc(myname1) {
    var text1 = myname1;
    if (document.getElementById(myname1).checked) {
        pc.push(myname1);
    } else {
        pc.splice(pc.indexOf(myname1), 1);
    }
    console.log(pc);
    document.getElementById("pca").value = pc.join("/");
}
<body>
<p>Product Categories</p>
             <input type="text" class="form-control" id="pca" name="pc" form="form1" onclick="getPc()" value="myname1/check2/check3">
             
<input type="checkbox" name="myname1" id="myname1" onclick="getPc(this.id)"  checked>
<input type="checkbox" name="check2" id="check2" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check3" id="check3" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check4" id="check4" onclick="getPc(this.id)"  >
<input type="checkbox" name="check5" id="check5" onclick="getPc(this.id)" >
<input type="checkbox" name="check6" id="check6" onclick="getPc(this.id)" >