Как проверить все флажки с помощью 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.

 <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- Написать следующее заявление в Js

file-

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

Выше заявление будет выбрать все флажок После нажатия на кнопку.

Если вы хотите проверить пример, пожалуйста, используйте эту ссылку - http://jsfiddle.net/oxg3p1ny/1/