1

我正在处理具有 4 个 chkbox 并选择一个或多个 chkbox 的表单，我调用了一个 javascript 函数，该函数在表单上显示特定的 div。一切都很完美，但问题是，在某些 div 中有一些重复的条目并选择那些具有重复条目的 div，它会显示重复的条目两次。我不想那样。因此，在表单上重复的条目应该只显示一次。

请帮帮我。提前致谢....

这是我尝试过的代码：

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

1 回答 1

4

我认为，您需要使用单个 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>
于 2013-05-07T05:59:58.103 回答