如何避免重复输入两个div中选择两个

问题描述：

我正在一个窗体有4个chkboxes并选择一个或多个chkboxes，我调用了一个显示窗体上的特定div的javascript函数。一切都很完美，但问题是，有些条目在某些div中复制，选择那些具有重复条目的div，它会显示两次重复的条目。我不想那样。所以，在表单上重复条目应该只显示一次。如何避免重复输入两个div中选择两个

Plz帮助我。在此先感谢....

这里是我试过的代码：

<!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>

我不明白你的要求。 – akonsu 2013-05-07 05:33:24

嗨。看到，有4个chkboxes并选择它们中的任何一个，特定的div被显示。总共有4个div，每个chkbox都有一个div。有些问题在某些div中重复出现（比如，它是在2006年之前建成的吗？）。现在，如果我选择多个div，那么在某些div中常见的一些问题正在显示。如果我选择前两个chkboxes，则相同的问题会显示两次。这是一个问题。我不想再次显示相同的问题。 – vickram 2013-05-07 05:45:20

尝试将ID分配给div – 2013-05-07 05:51:47

答

我想，你需要使用单格和代码删除重复的选择框。仅显示选定的块 - 将具有问题的类分配给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>

这正是我写的。这种方法应该可行。 – Jace 2013-05-07 06:02:05

谢谢，但我应该删除剩余的所有div？如果我删除剩余的div，那么调用函数怎么样（onchange =“fnchecked（this.checked，'question1'）;”）。 – vickram 2013-05-07 06:34:54

请参阅答案中的代码。我添加'question1'等等到P元素作为类，如果这个块必须与它复选框可见。在'fnchecked'函数中，修改showClasses变量以存储选定框的实际列表。对于每个检查项目，请将其选中或不选择。 – Eugene 2013-05-07 06:44:07

如何避免重复输入两个div中选择两个

相关推荐