HTML选择三个不同的复选框并显示它们
我有一个非常简单的HTML页面,其中包含不同的复选框,我希望选择其中的三个并显示下面的产品名称。HTML选择三个不同的复选框并显示它们
我需要什么,例如,如果我选择复选框Nº1,3和4,我需要看到:
选择3个香水
- 香水一生之
- 热带
- Eau d'Issey2
但是每次点击一个复选框,我会得到三个相同的结果。任何人都可以帮助我吗? 我的代码如下...
非常感谢!
<html>
<head>
<script language="javascript" type="text/javascript">
function exefunction(me) {
var check = document.getElementById(me.id).checked;
var checked_value;
var str1 = "product";
var n = 1;
for (i = 0; i <= 2; i++) {
if (check) {
checked_value = document.getElementById(me.id).name
document.getElementById("product" + n).innerHTML = checked_value;
n++;
}
}
}
</script>
</head>
<body>
<p>1.
<input type="checkbox" id="1" name="Eau d'Issey" title="Select All" onclick="exefunction(this);">
<p>2.
<input type="checkbox" id="2" name="Fahrenheit" title="Select All" onclick="exefunction(this);">
<p>3.
<input type="checkbox" id="3" name="Tropical" title="Select All" onclick="exefunction(this);">
<p>4.
<input type="checkbox" id="4" name="Eau d'Issey2" title="Select All" onclick="exefunction(this);">
<p>5.
<input type="checkbox" id="5" name="Fahrenheit2" title="Select All" onclick="exefunction(this);">
<p>6.
<input type="checkbox" id="6" name="Tropical2" title="Select All" onclick="exefunction(this);">
<p>Choose 3 perfumes.</p>
<h3>1: </h3>
<p id="product1"></p>
<h3>2: </h3>
<p id="product2"></p>
<h3>3: </h3>
<p id="product3"></p>
</body>
</html>
不要使用值ID号,ID = “1”,将可能的地方工作,但ID属性必须以字母开头。关闭需要关闭的html标签。在这个例子中,它不会影响程序的工作方式,但会影响很多次。很多javascript错误都是由错误的html造成的。
在你的程序中你已经有HTML对象,你并不需要寻找它的id属性,而不是:
document.getElementById(me.id).checked;
您可以使用
me.checked
这个例子也许不是什么你想要但它是改进。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script language="javascript" type="text/javascript">
var n=1;
function exefunction(me) {
var checked_value=me.getAttribute('name');
if(me.checked){
document.getElementById("product" + n).innerHTML = checked_value;
n++;
if(n==4)n=1;
}else{
for(var i=1;i<=3;i++){
var d=document.getElementById('product'+i);
if(d.innerHTML==checked_value && d.innerHTML!=''){
d.innerHTML="";
n=i;
}
}
}
}
</script>
</head>
<body>
<p>1. <input type="checkbox" name="Eau d'Issey" title="Select All" onclick="exefunction(this);"></p>
<p>2. <input type="checkbox" name="Fahrenheit" title="Select All" onclick="exefunction(this);"></p>
<p>3. <input type="checkbox" name="Tropical" title="Select All" onclick="exefunction(this);"></p>
<p>4. <input type="checkbox" name="Eau d'Issey2" title="Select All" onclick="exefunction(this);"></p>
<p>5. <input type="checkbox" name="Fahrenheit2" title="Select All" onclick="exefunction(this);"></p>
<p>6. <input type="checkbox" name="Tropical2" title="Select All" onclick="exefunction(this);"></p>
<p>Choose 3 perfumes.</p>
<h3>1: </h3>
<p id="product1"></p>
<h3>2: </h3>
<p id="product2"></p>
<h3>3: </h3>
<p id="product3"></p>
</body>
</html>
最终代码
<html>
<head>
<script language="javascript" type="text/javascript">
function exefunction(me) {
var check = document.getElementById(me.id).checked;
var checked_value;
var str1 = "product";
checked_value = document.getElementById(me.id).name
for (i = 0; i <= 2; i++) {
if(document.getElementById("product" + (i+1)).innerHTML === ""){
document.getElementById("product" + (i+1)).innerHTML = checked_value;
return;}
}
}
</script>
</head>
<body>
<p>1.
<input type="checkbox" id="1" name="Eau d'Issey" title="Select All" onclick="exefunction(this);">
<p>2.
<input type="checkbox" id="2" name="Fahrenheit" title="Select All" onclick="exefunction(this);">
<p>3.
<input type="checkbox" id="3" name="Tropical" title="Select All" onclick="exefunction(this);">
<p>4.
<input type="checkbox" id="4" name="Eau d'Issey2" title="Select All" onclick="exefunction(this);">
<p>5.
<input type="checkbox" id="5" name="Fahrenheit2" title="Select All" onclick="exefunction(this);">
<p>6.
<input type="checkbox" id="6" name="Tropical2" title="Select All" onclick="exefunction(this);">
<p>Choose 3 perfumes.</p>
<h3>1: </h3>
<p id="product1"></p>
<h3>2: </h3>
<p id="product2"></p>
<h3>3: </h3>
<p id="product3"></p>
</body>
</html>
不,不起作用。 – Joanmacat
@Joanmacat我编辑并把最终的代码放在这里 –
请在代码编辑器使用整齐按钮。 – Roope