如何创建与嵌入式链接相对应的复选框

时间:2019-07-18 20:03:23

标签: html

帮助我创建带有嵌入式链接的复选框

一切

<body style="text-align: left;">
  <h1>Select which delimiter you want to use.</h1>
  <big>Select either TSV or CSV: </big><br>
  <input type="checkbox" name="acs" value="CSV">CSV<br> 
  <input type="checkbox" name="acs" value="TSV">TSV<br>
  <p>
    <input type="button" onclick='printChecked()' value="Print Selected Items" /input>
  </p>
</body>

它会打印没有附加链接的复选框。

1 个答案:

答案 0 :(得分:0)

以下代码包含您要查找的内容

function printChecked(){
  	var checkboxes = document.getElementsByName("acs");
  	var list = document.getElementById("chckValues");
  	list.innerHTML = "";
  	for(var i=0;i<checkboxes.length;i++){
  		if(checkboxes[i].checked == true){
  			var listentry = document.createElement('li');
  			var link = document.createElement('a');
  			link.href = '#' + checkboxes[i].id
  			link.appendChild(document.createTextNode(checkboxes[i].value));
		listentry.appendChild(link);
		list.appendChild(listentry);
  			}
  		}
}
<h1>Select which delimiter you want to use.</h1>
<big>Select either TSV or CSV: </big><br>
<input type="checkbox" id="acs1" name="acs" value="CSV">CSV<br> 
<input type="checkbox" id="acs2" name="acs" value="TSV">TSV<br>
<p>
<input type="button" onclick='printChecked()' value="Print Selected Items" /input>
</p>
<ol id="chckValues"></ol>