複選框全選php javascript

我製作了一個腳本，以便爲表單中的項目創建一個全選選項。複選框全選php javascript

<script> 
     function Check(frm){ 
     var checkBoxes = frm.elements['patients[]']; 

     for (i = 0; i < checkBoxes.length; i++){ 
      checkBoxes[i].checked = (checkBoxes[i].checked != true) ? true : false; 
     } 

     } 

     window.onload = function(){ 
      document.getElementById("selectpatient").onchange = function(){Check(document.selectform)}; 
     }; 
</script>

這適用於以下示例代碼。

<body> 
<form name="selectform" method="" action=""> 
<label for="red">Red</label> 
<input type="checkbox" name="patients[]" value="red" id="red"/><br /> 

<label for="blue">Blue</label> 
<input type="checkbox" name="patients[]" value="blue" id="blue"/><br /> 

<label for="green">Green</label> 
<input type="checkbox" name="patients[]" value="green" id="green"/><br /> 

<label for="black">Black</label> 
<input type="checkbox" name="patients[]" value="black" id="black"/><br /><br /> 

<label for="selectall" id="selectControl">Select All</label> 
<input type="checkbox" id="selectall" /> 
</form> 

<script> 
function Check(frm){ 
var checkBoxes = frm.elements['patients[]']; 

for (i = 0; i < checkBoxes.length; i++){ 
checkBoxes[i].checked = (checkBoxes[i].checked != true) ? true : false; 
} 

} 

window.onload = function(){ 
document.getElementById("selectall").onchange = function() Check(document.selectform)}; 
}; 
</script> 
</body>

不過，我在我試圖運行的代碼，以便能夠從database.The腓段選擇項目如下：一個獨立的PHP代碼。

  <div class="row"><form name="selectform" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="post"> 
     <div class="box clearfix"> 
     <table class="table" > 
      <thead> 
      <tr> 
       <th><input type="checkbox" id='selectall' ></th> 

       <th>First Name</th> 
       <th>Last Name</th> 
       <th>NIC</th> 
       <th>Address</th> 

       <th>Telephone/Mobile</th> 
       <th>Disability</th> 
       <th>Reason</th> 
       <th>Description</th> 
       <th></th> 
      </tr> 
      </thead> 
      <tbody> 
      <?php 
       while ($data = $res->fetch_assoc()){ 
        echo "<tr><td><input type='checkbox' name='patients[]' id='patients[]' value='".$data['PatientID']."'></td><td>".$data['First_Name']."</td><td>".$data['Last_Name']."</td><td>".$data['NIC_No']."</td><td>".$data['Address']."</td><td>".$data['Telephone']."</td><td>".$data['Disability']."</td><td>".html_entity_decode($data['Reason'])."</td><td>".html_entity_decode($data['Description'])."</td>"; 
       } 
      ?> 
      </tbody> 
     </table> 
    </div> 

       </form> 
       <script> 
         function Check(frm){ 
         var checkBoxes = frm.elements['patients[]']; 

         for (i = 0; i < checkBoxes.length; i++){ 
          checkBoxes[i].checked = (checkBoxes[i].checked != true) ? true : false; 
         } 

         } 

         window.onload = function(){ 
          document.getElementById("selectall").onchange = function(){Check(document.selectform)}; 
         }; 
        </script> 

    </div>

上述代碼不執行select all腳本。請建議我可以做些什麼來實現這一功能。

來源

2016-02-17 Kavinda Keshan Rasnayake

看來你缺少onchange回調{：

function Check(frm) { 
 
    var checkBoxes = frm.elements['patients[]']; 
 

 
    for (i = 0; i < checkBoxes.length; i++) { 
 
    checkBoxes[i].checked = (checkBoxes[i].checked != true) ? true : false; 
 
    } 
 

 
} 
 

 
window.onload = function() { 
 
    document.getElementById("selectall").onchange = function() { // <--missing { here 
 
    Check(document.selectform) 
 
    }; 
 
};

<form name="selectform" method="" action=""> 
 
    <label for="red">Red</label> 
 
    <input type="checkbox" name="patients[]" value="red" id="red" /> 
 
    <br /> 
 

 
    <label for="blue">Blue</label> 
 
    <input type="checkbox" name="patients[]" value="blue" id="blue" /> 
 
    <br /> 
 

 
    <label for="green">Green</label> 
 
    <input type="checkbox" name="patients[]" value="green" id="green" /> 
 
    <br /> 
 

 
    <label for="black">Black</label> 
 
    <input type="checkbox" name="patients[]" value="black" id="black" /> 
 
    <br /> 
 
    <br /> 
 

 
    <label for="selectall" id="selectControl">Select All</label> 
 
    <input type="checkbox" id="selectall" />

或者你也可以簡化這個更多的是：

function Check(frm, ischecked) { 
 
    var checkBoxes = frm.elements['patients[]']; 
 

 
    for (i = 0; i < checkBoxes.length; i++) { 
 
    checkBoxes[i].checked = ischecked; // and just update for all here 
 
    } 
 

 
} 
 

 
window.onload = function() { 
 
    document.getElementById("selectall").onchange = function() { // <--missing { here 
 
    Check(document.selectform, this.checked); // <----pass the state here 
 
    }; 
 
};

<form name="selectform" method="" action=""> 
 
    <label for="red">Red</label> 
 
    <input type="checkbox" name="patients[]" value="red" id="red" /> 
 
    <br /> 
 

 
    <label for="blue">Blue</label> 
 
    <input type="checkbox" name="patients[]" value="blue" id="blue" /> 
 
    <br /> 
 

 
    <label for="green">Green</label> 
 
    <input type="checkbox" name="patients[]" value="green" id="green" /> 
 
    <br /> 
 

 
    <label for="black">Black</label> 
 
    <input type="checkbox" name="patients[]" value="black" id="black" /> 
 
    <br /> 
 
    <br /> 
 

 
    <label for="selectall" id="selectControl">Select All</label> 
 
    <input type="checkbox" id="selectall" />

來源

2016-02-17 09:23:47 Jai

謝謝你，但我對第三代代碼更感興趣，它沒有按預期運行。我應該附上完整的代碼嗎？ –

@Adniwhack可能是應用了相同ID的情況，您可以爲其使用uqique ids或將prop ID更改爲class。 – Jai

複選框全選php javascript

回答

相關問題