如何檢查所有使用JS的複選框？

Question

我想檢查所有使用JavaScript的複選框。當我點擊提交按鈕時，應該檢查所有的複選框。但是，所有的複選框都會被檢查幾秒鐘。

我在做什麼錯？

HTML：

<form method="post" name="myform"> 
    <input type="checkbox" name="h" value="1" id="g">Reading<br/> 
    <input type="checkbox" name="h" value="2" id="g">php<br/> 
    <input type="checkbox" name="h" value="3" id="g">playing<br/> 
    <input type="checkbox" name="h" value="4" id="g">Gaming<br/> 
    <input type="checkbox" name="h" value="5" id="g">Coding<br/> 
    <input type="submit" name="sub" value="submit" onclick="checkall(document.myform.h)" > 
</form> 

JavaScript代碼：

<script type="text/javascript"> 
    function checkall(chk){  
    for(var i = 0; i < chk.length; i++) { 
    chk[i].checked = true;  
    } 
    } 
    </script> 

Answer 1

問題是您正在使用一種形式，它在點擊將提交表單中的提交按鈕。

因此，一種解決方案是將按鈕形式的提交按鈕更改爲不會觸發提交表單的普通按鈕。

function checkall(chk) { 
 
    var i; 
 
    for (i = 0; i < chk.length; i++) { 
 
    chk[i].checked = true; 
 
    //return true; 
 
    } 
 

 
}

<form method="post" name="myform"> 
 
    <input type="checkbox" name="h" value="1" id="g">Reading 
 
    <br/> 
 
    <input type="checkbox" name="h" value="2" id="g">php 
 
    <br/> 
 
    <input type="checkbox" name="h" value="3" id="g">playing 
 
    <br/> 
 
    <input type="checkbox" name="h" value="4" id="g">Gaming 
 
    <br/> 
 
    <input type="checkbox" name="h" value="5" id="g">Coding 
 
    <br/> 
 
    <!--<input type="radio" name="gen" value="male">Male<br/>--> 
 
    <!--<input type="radio" name="gen" value="female">Female<br/>--> 
 
    <input type="button" name="sub" value="submit" onclick="checkall(document.myform.h)"> 
 

 
</form>

Answer 2

你的代碼是從工作形式只是停止提交將解決您的問題，使用<form method="post" name="myform" onsubmit="return false">和使用AJAX來獲取數據。

Working Fiddle

Answer 3

您創建了一個form.And形式會點擊提交button.You可以使用下面的方法，只選擇所有複選框後提交。

第1步 - 在html中寫下面的語句。在JS文件 -

jQuery('#custom_button').click(function(){ 
    jQuery('.g').each(function() { //loop through each checkbox 
       this.checked = true; //deselect all checkboxes with class "checkbox1"      
      });  
}); 

上述聲明

 <input type="checkbox" name="h" value="1" class="g">Reading<br/> 
    <input type="checkbox" name="h" value="2" class="g">php<br/> 
    <input type="checkbox" name="h" value="3" class="g">playing<br/> 
    <input type="checkbox" name="h" value="4" class="g">Gaming<br/> 
    <input type="checkbox" name="h" value="5" class="g">Coding<br/> 
    <input type="button" name="sub" value="check all" id='custom_button'> 

第2步 - 寫下面的語句將選擇點擊按鈕後，所有的複選框。

如果您想查詢例如，請使用此鏈接 - http://jsfiddle.net/oxg3p1ny/1/