Php 如何在选择两个div时避免两个div中的重复条目
我正在处理一个有4个chkboxe的表单，并选择一个或多个chkboxe，我调用了一个javascript函数，该函数在表单上显示特定的div。一切都很完美，但问题是，有些div中有重复的条目&选择那些有重复条目的div，它会显示重复条目两次。我不想那样。因此，表单上的重复条目只应显示一次 请帮帮我。 提前谢谢 这是我的代码：Php 如何在选择两个div时避免两个div中的重复条目,php,javascript,html,Php,Javascript,Html,我正在处理一个有4个chkboxe的表单，并选择一个或多个chkboxe，我调用了一个javascript函数，该函数在表单上显示特定的div。一切都很完美，但问题是，有些div中有重复的条目&选择那些有重复条目的div，它会显示重复条目两次。我不想那样。因此，表单上的重复条目只应显示一次 请帮帮我。 提前谢谢 这是我的代码： <!DOCTYPE html> <html> <head> <script> fu
<!DOCTYPE html>
<html>
<head>
<script>
function fnchecked(blnchecked,divid)
{
if(blnchecked)
{
document.getElementById(divid).style.display= "";
}
else
{
document.getElementById(divid).style.display= "none";
}
}
</script>
</head>
<body>
<form name="shohide1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div>
<label>Technologies: </label></br>
<input type="checkbox" name="technologies1" onClick="fnchecked(this.checked,'questions1');" /> Kingspan Solar</br>
<input type="checkbox" name="technologies2" onClick="fnchecked(this.checked,'questions2');" /> Solar PVT</br>
<input type="checkbox" name="technologies3" onClick="fnchecked(this.checked,'questions3');" /> Insulation</br>
<input type="checkbox" name="technologies4" onClick="fnchecked(this.checked,'questions4');" /> Gas boiler</br>
<div id="questions1" style="display:none;">
<p>
How many people live in the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1 to 3 (200 litre system)</option>
<option value="people2">3 to 4 (250 litre system)</option>
<option value="people3">4 to 6 (300 litre system)</option>
<option value="people4">6 to 9 (400 litre system)</option>
</select>
</p>
<p>
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p>
Is your house south facing?
<select name="house_face">
<option value="">Click & Choose</option>
<option value="house_face1">South</option>
<option value="house_face2">South east or South west</option>
<option value="house_face3">East or West</option>
<option value="house_face4">No</option>
</select>
</p>
<p>
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
</div>
<div id="questions2" style="display:none;">
<p>
How many people live at the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1-2</option>
<option value="people2">3</option>
<option value="people3">4</option>
<option value="people4">4-6</option>
<option value="people4">6-8</option>
</select>
</p>
<p>
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p>
Is your house south facing?
<select name="house_face">
<option value="">Click & Choose</option>
<option value="house_face1">South</option>
<option value="house_face2">South east or South west</option>
<option value="house_face3">East or West</option>
<option value="house_face4">No</option>
</select>
</p>
<p>
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
</div>
<div id="questions3" style="display:none;">
<p>
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p>
Is your house detached?
<select name="detached">
<option value="">Click & Choose</option>
<option value="detached1">Detached</option>
<option value="detached2">Semi D</option>
<option value="detached3">Mid Terrace</option>
<option value="detached4">Apartment</option>
</select>
</p>
<p>
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
</div>
<div id="questions4" style="display:none;">
<p>
How many bedrooms are in the house?
<select name="bedroom">
<option value="">Click & Choose</option>
<option value="bedroom1">1-2</option>
<option value="bedroom2">2-3</option>
<option value="bedroom3">3-4</option>
<option value="bedroom4">4-5</option>
<option value="bedroom5">5-8</option>
</select>
</p>
<p>
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p>
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
</div>
</div>
</body>
</html>
功能fnchecked（blnchecked，divid）
{
如有（打钩）
{
document.getElementById（divid）.style.display=“”；
}
其他的
{
document.getElementById（divid）.style.display=“无”；
}
}
我认为，您需要使用单div并从代码中删除重复的选择块。用于仅显示选定块-将带有问题的类分配给P元素，并存储选定类的列表，以及仅显示/隐藏带有选定类的块
看起来是这样的：
<!DOCTYPE html>
<html>
<head>
<script>
var showClasses = {
};
function fnchecked(blnchecked,className)
{
if(blnchecked)
{
showClasses[className] = true;
}
else
{
showClasses[className] = false;
}
var ps = document.getElementById("div-block").children;
var psNumber = ps.length;
for (var i = 0; i < psNumber; i ++) {
var have = hasClasses(ps[i], showClasses);
if (have) {
ps[i].style.display = "";
} else {
ps[i].style.display = "none";
}
}
}
function hasClasses(element) {
var result = false;
for (var cls in showClasses) {
if (showClasses[cls]) {
if ((' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1) {
result = true;
}
}
}
return result
}
</script>
</head>
<body>
<form name="shohide1" method="POST" action="">
<div>
<label>Technologies: </label></br>
<input type="checkbox" name="technologies1" onchange="fnchecked(this.checked,'question1');" /> Kingspan Solar</br>
<input type="checkbox" name="technologies2" onchange="fnchecked(this.checked,'question2');" /> Solar PVT</br>
<input type="checkbox" name="technologies3" onchange="fnchecked(this.checked,'question3');" /> Insulation</br>
<input type="checkbox" name="technologies4" onchange="fnchecked(this.checked,'question4');" /> Gas boiler</br>
<div id="div-block" >
<p class="question1 question2 " style="display: none">
How many people live in the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1 to 3 (200 litre system)</option>
<option value="people2">3 to 4 (250 litre system)</option>
<option value="people3">4 to 6 (300 litre system)</option>
<option value="people4">6 to 9 (400 litre system)</option>
</select>
</p>
<p class="question1 question2 question3 question4 " style="display: none">
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p class="question1 question2 " style="display: none">
Is your house south facing?
<select name="house_face">
<option value="">Click & Choose</option>
<option value="house_face1">South</option>
<option value="house_face2">South east or South west</option>
<option value="house_face3">East or West</option>
<option value="house_face4">No</option>
</select>
</p>
<p class="question1 question2 question3 question4 " style="display: none">
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
<p class="question2 question3 " style="display: none">
Is your house detached?
<select name="detached">
<option value="">Click & Choose</option>
<option value="detached1">Detached</option>
<option value="detached2">Semi D</option>
<option value="detached3">Mid Terrace</option>
<option value="detached4">Apartment</option>
</select>
</p>
<p class=" question4 " style="display: none">
How many bedrooms are in the house?
<select name="bedroom">
<option value="">Click & Choose</option>
<option value="bedroom1">1-2</option>
<option value="bedroom2">2-3</option>
<option value="bedroom3">3-4</option>
<option value="bedroom4">4-5</option>
<option value="bedroom5">5-8</option>
</select>
</p>
</div>
</div>
</body>
</html>
变量showClasses={
};
函数fnchecked（blnchecked，类名）
{
如有（打钩）
{
showClasses[className]=true；
}
其他的
{
showClasses[className]=false；
}
var ps=document.getElementById（“div块”）.children；
var psNumber=ps.length；
对于（变量i=0；i-1）{
结果=真；
}
}
}
返回结果
}
技术：
金斯潘太阳能
太阳能光伏发电
绝缘
燃气锅炉
这房子里住了多少人？
单击并选择
1至3（200升系统）
3至4（250升系统）
4至6（300升系统）
6至9（400升系统）
你住在什么样的房子里？
单击并选择
平房
2层
老虎机
三四层
公寓
你的房子朝南吗？
单击并选择
南方
东南还是西南
东方还是西方
不
它是在2006年之前建造的吗？
单击并选择
对
不
你的房子是独立的吗？
单击并选择
独立的
半D
中台
公寓
房子里有多少间卧室？
单击并选择
1-2
2-3
3-4
4-5
5-8
我认为，您需要使用单div并从代码中删除重复的选择块。用于仅显示选定块-将带有问题的类分配给P元素，并存储选定类的列表，以及仅显示/隐藏带有选定类的块
看起来是这样的：
<!DOCTYPE html>
<html>
<head>
<script>
var showClasses = {
};
function fnchecked(blnchecked,className)
{
if(blnchecked)
{
showClasses[className] = true;
}
else
{
showClasses[className] = false;
}
var ps = document.getElementById("div-block").children;
var psNumber = ps.length;
for (var i = 0; i < psNumber; i ++) {
var have = hasClasses(ps[i], showClasses);
if (have) {
ps[i].style.display = "";
} else {
ps[i].style.display = "none";
}
}
}
function hasClasses(element) {
var result = false;
for (var cls in showClasses) {
if (showClasses[cls]) {
if ((' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1) {
result = true;
}
}
}
return result
}
</script>
</head>
<body>
<form name="shohide1" method="POST" action="">
<div>
<label>Technologies: </label></br>
<input type="checkbox" name="technologies1" onchange="fnchecked(this.checked,'question1');" /> Kingspan Solar</br>
<input type="checkbox" name="technologies2" onchange="fnchecked(this.checked,'question2');" /> Solar PVT</br>
<input type="checkbox" name="technologies3" onchange="fnchecked(this.checked,'question3');" /> Insulation</br>
<input type="checkbox" name="technologies4" onchange="fnchecked(this.checked,'question4');" /> Gas boiler</br>
<div id="div-block" >
<p class="question1 question2 " style="display: none">
How many people live in the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1 to 3 (200 litre system)</option>
<option value="people2">3 to 4 (250 litre system)</option>
<option value="people3">4 to 6 (300 litre system)</option>
<option value="people4">6 to 9 (400 litre system)</option>
</select>
</p>
<p class="question1 question2 question3 question4 " style="display: none">
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p class="question1 question2 " style="display: none">
Is your house south facing?
<select name="house_face">
<option value="">Click & Choose</option>
<option value="house_face1">South</option>
<option value="house_face2">South east or South west</option>
<option value="house_face3">East or West</option>
<option value="house_face4">No</option>
</select>
</p>
<p class="question1 question2 question3 question4 " style="display: none">
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
<p class="question2 question3 " style="display: none">
Is your house detached?
<select name="detached">
<option value="">Click & Choose</option>
<option value="detached1">Detached</option>
<option value="detached2">Semi D</option>
<option value="detached3">Mid Terrace</option>
<option value="detached4">Apartment</option>
</select>
</p>
<p class=" question4 " style="display: none">
How many bedrooms are in the house?
<select name="bedroom">
<option value="">Click & Choose</option>
<option value="bedroom1">1-2</option>
<option value="bedroom2">2-3</option>
<option value="bedroom3">3-4</option>
<option value="bedroom4">4-5</option>
<option value="bedroom5">5-8</option>
</select>
</p>
</div>
</div>
</body>
</html>
变量showClasses={
};
函数fnchecked（blnchecked，类名）
{
如有（打钩）
{
showClasses[className]=true；
}
其他的
{
showClasses[className]=false；
}
var ps=document.getElementById（“div块”）.children；
var psNumber=ps.length；
对于（变量i=0；i-1）{
结果=真；
}
}
}
返回结果
}
技术：
金斯潘太阳能
太阳能光伏发电
绝缘
燃气锅炉
这房子里住了多少人？
单击并选择
1至3（200升系统）
3至4（250升系统）
4至6（300升系统）
6至9（400升系统）
你住在什么样的房子里？
单击并选择
平房
2层
老虎机
三四层
公寓