如何使用（搜索文本框）查找複選框的文本？

如何使用（搜索文本框）查找複選框的文本，並在將文字放入文本框並單擊輸入後，將根據我的編碼顯示該複選框。這是什麼編碼？而我的複選框在[else if（f & & g）{]不起作用。它不顯示我放的結果。爲什麼？任何人都可以修復我的代碼如何使用（搜索文本框）查找複選框的文本？

<!DOCTYPE html> 
 
<style> 
 
    body, 
 
    h1 { 
 
    font-family: "Montserrat", sans-serif 
 
    } 
 
    
 
    img { 
 
    margin-bottom: -7px 
 
    } 
 
    
 
    input[type=text] { 
 
    width: 130px; 
 
    font-size: 14px; 
 
    background-color: white; 
 
    background-position: 10px 10px; 
 
    background-repeat: no-repeat; 
 
    } 
 
    
 
    input[type=text]:focus {} 
 
</style> 
 

 
<body> 
 

 
    <!-- Header --> 
 
    <h3><b><label for="search">Search</label></b> 
 
    <input id="search" type="text" name="search" placeholder="Search.." /></h3> 
 

 
    <head> 
 
    <script> 
 
     function fungsi() { 
 

 
     var a = document.getElementById("subSolving1").checked; 
 
     var b = document.getElementById("subSolving2").checked; 
 
     var c = document.getElementById("subSolving3").checked; 
 

 
     var d = document.getElementById("subConclusion1").checked; 
 
     var e = document.getElementById("subConclusion2").checked; 
 

 
     var f = document.getElementById("subRepeated1").checked; 
 
     var g = document.getElementById("subRepeated2").checked; 
 

 
     if (c || d === true) { 
 
      document.getElementById("Status").innerHTML = "Problem1"; 
 
     } else if (b || a || e) { 
 
      document.getElementById("Status").innerHTML = "Problem2"; 
 
     } else if (f) { 
 
      document.getElementById("Status").innerHTML = "Problem3"; 
 
     } else if (g) { 
 
      document.getElementById("Status").innerHTML = "Problem4"; 
 
     } else if (f && g) { 
 
      document.getElementById("Status").innerHTML = "Problem5"; 
 
     } 
 
     } 
 
    </script> 
 
    </head> 
 

 
    <body> 
 

 
    <b>Origin:</b> 
 

 
    <script type="text/javascript"> 
 
     function ShowHideDiv(Solving) { 
 
     var subSolving = document.getElementById("subSolving"); 
 
     subSolving.style.display = Solving.checked ? "block" : "none"; 
 
     } 
 
    </script> 
 
    <label for="Solving"> <input type="checkbox" id="Solving" onclick="ShowHideDiv(this)" value="Solving"/>Solving</label> 
 

 
    <script type="text/javascript"> 
 
     function ShowHideDiv2(Conclusion) { 
 
     var subConclusion = document.getElementById("subConclusion"); 
 
     subConclusion.style.display = Conclusion.checked ? "block" : "none"; 
 
     } 
 
    </script> 
 
    <label for="Conclusion"> <input type="checkbox" id="Conclusion" onclick="ShowHideDiv2(this)" value="Conclusion"/>Conclusion</label> 
 

 
    <script type="text/javascript"> 
 
     function ShowHideDiv3(Repeated) { 
 
     var subRepeated = document.getElementById("subRepeated"); 
 
     subRepeated.style.display = Repeated.checked ? "block" : "none"; 
 
     } 
 
    </script> 
 
    <label for="Repeated"> <input type="checkbox" id="Repeated" onclick="ShowHideDiv3(this)" value="Repeated"/> 
 
\t \t \t Repeated</label> 
 

 
    <div id="subSolving" style="display: none"> 
 
     <p><label> <input type="checkbox" id="subSolving1" onclick="fungsi()"/>subSolving1 
 
\t \t \t \t \t </label></p> 
 

 
     <p><label> <input type="checkbox" id="subSolving2" onclick="fungsi()"/>subSolving2</label></p> 
 

 
     <p><label> <input type="checkbox" id="subSolving3" onclick="fungsi()"/>subSolving3 </label></p></div> 
 

 
     <div id="subConclusion" style="display: none"> 
 

 
     <p><label> <input type="checkbox" id="subConclusion1" onclick="fungsi()"/>subConclusion</label></p> 
 

 
     <p><label> <input type="checkbox" id="subConclusion2" onclick="fungsi()"/>subConclusion 
 
\t \t \t \t \t </label></p> 
 
     </div> 
 

 
     <div id="subRepeated" style="display: none"> 
 
     <p><label> <input type="checkbox" id="subRepeated1" onclick="fungsi()"/>subRepeated1</label></p> 
 

 
     <p><label> <input type="checkbox" id="subRepeated2" onclick="fungsi()"/>subRepeated2 
 
\t \t \t \t \t </label></p> 
 
     </div> 
 

 
     <b><hr/><p id="Status"></p></b></header> 
 

 
    </div> 
 
    </div> 
 
    </body>

來源

2017-06-02 wani

任何人都可以幫助我嗎？ – wani

你最後if語句從不打的，因爲如果你檢查F或G型複選框，然後行代碼，您僅適用於F或G滿足條件檢查。因此，只需在這兩者之上移動f條件即可。

if (c || d === true) { 
     document.getElementById("Status").innerHTML = "Problem1"; 
    } else if (b || a || e) { 
     document.getElementById("Status").innerHTML = "Problem2"; 
    } else if (f && g) { 
     document.getElementById("Status").innerHTML = "Problem5"; 
    } else if (f) { 
     document.getElementById("Status").innerHTML = "Problem3"; 
    } else if (g) { 
     document.getElementById("Status").innerHTML = "Problem4"; 
    }

對於搜索部分，您需要更具體些。

這裏的fiddle你在哪裏聽輸入鍵被按下搜索輸入。

編輯

下面的代碼，它偵聽keyup事件，如果輸入鍵被按下，那麼它只是遍歷所有<label>標籤，其中文本。如果此標籤文本包含搜索字符串，則顯示<label>，否則將隱藏。

function filterWithSearch(e){ 
    if(e.which === 13) 
    { 
     var searchStr = e.target.value.toLowerCase(); 
     var cxb = document.querySelectorAll("label") 
     for(var i = 0; i < cxb.length; i++) { 

     if(cxb[i].textContent.toLowerCase().indexOf(searchStr) !== -1){ 
      cxb[i].style.display = 'block'; 
     } else { 
      cxb[i].style.display = 'none'; 
     } 
     } 
    } 
    }

來源

2017-06-02 03:33:26

它看起來像這樣。 https://embed.plnkr.co/fDzATotA41o9tuxY6vEE/。但我不太瞭解編碼，我仍然在學習。對於搜索部分，搜索我的任何複選框並僅顯示該結果。 – wani

這樣的事情？ http://plnkr.co/edit/lK6G4VywYVYnkjLudas0?p=preview –

是的。是否有可能沒有鏈接？因爲我不太明白，希望看到完整的編碼。 – wani

我建議你組織你的HTML代碼，樣式和腳本。避免使用內聯編碼來防止混淆。使用外部腳本並將其引用到您的html代碼中。

來源

2017-06-02 03:36:14

如何使用（搜索文本框）查找複選框的文本？

回答

相關問題