How to submit 0 if checkbox is unchecked and submit 1 if checkbox is checked in HTML

Question

How to submit value 1 if a checkbox in a checkbox array is checked, and submit 0 if it's unchecked? I tried this but no luck. I am trying to grab this array in a php array when the form is submitted. Please help!

<input id = 'testName0' type = 'checkbox' name = 'check[0]' value = '1' checked>
<input id='testNameHidden0'  type='hidden' value='0' name='check[0]'>

<input id = 'testName1' type = 'checkbox' name='check[1]' value = '1' unchekced>
<input id='testNameHidden1'  type='hidden' value='0' name='check[1]'>

<input type = 'submit' value = 'Save Changes'>
>
<script>
if(document.getElementById('testName0').checked){
  document.getElementById('testNameHidden0').disabled = true;
}
</script>

<script>
if(document.getElementById('testName1').checked){
  document.getElementById('testNameHidden1').disabled = true;
}
</script>

score 84 · Accepted Answer · edited Jun 03 '20 at 18:07

Simplest one, no javascript required, just put a hidden input before the checkbox:

<input type="hidden" name="check[0]" value="0" />
<input type="checkbox" name="check[0]" value="1" />

Inputs need to have the same name. If the checkbox is checked then value 1 will be submitted, otherwise value 0 from the hidden input.

Your case javascript solution, no hidden inputs needed:

<script type="text/javascript">
    // when page is ready
    $(document).ready(function() {
         // on form submit
        $("#form").on('submit', function() {
            // to each unchecked checkbox
            $(this + 'input[type=checkbox]:not(:checked)').each(function () {
                // set value 0 and check it
                $(this).attr('checked', true).val(0);
            });
        })
    })
</script>

<form method="post" id="form">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>

PHP solution, no hidden inputs needed:

<?php
    // if data is posted, set value to 1, else to 0
    $check_0 = isset($_POST['check'][0]) ? 1 : 0;
    $check_1 = isset($_POST['check'][1]) ? 1 : 0;
?>

<form method="post">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>

EDIT: the javascript solution is not valid anymore as of jquery 1.6. Based on this, a more proper solution is the following:

<script type="text/javascript">
    // when page is ready
    $(document).ready(function() {
         // on form submit
        $("#form").on('submit', function() {
            // to each unchecked checkbox
            $(this).find('input[type=checkbox]:not(:checked)').prop('checked', true).val(0);
        })
    })
</script>

<form method="post" id="form">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>

There is really no need to use javascript for such simple task. But i have edited my answer to include javascript and php solution too. — JungleZombie, Jul 12 '15 at 11:55
Important note: the HTTP request will contain both values if the checkbox is checked. (Or did I misunderstand something?) — Basj, May 13 '20 at 12:04
this helped me understand how the getAttribute method works as a whole ty — Colin m Gilker, Mar 21 '21 at 08:33
In my case I need javascript because I use array of named fields so thanks for update — Noman Shaikh, Aug 25 '21 at 13:05

score 1 · Answer 2 · answered Feb 01 '20 at 01:44

A better solution that solved this for me.

Problem: Both the hidden and the checked were sending to my server.

Solution:

if len(key) == 1 {
  value = false
} else {
  value = true
}

This way, if len(key) is 1 I know that only the hidden field was being send. Any other scenario means that the box is checked. Simple and easy.

Abhi Das · Answer 3 · 2019-10-30T06:08:38.763

0

Well I have a much more simple code that worked well for me:

<input type="checkbox" value="true" id="checkBox">

Then the JQuery code:

var checkBoxValue = $('#checkBox').is(':checked')?$('#checkBox').val():false

I used a ternary operator to set the value on checked and unchecked condition.

edited Oct 30 '19 at 06:08

answered Oct 30 '19 at 05:52

Abhi Das

500
8
11

3

You have introduced jQuery here, where it is not mentioned at all in the question. – Jon P Oct 30 '19 at 05:59
1

@JonP The selected answer with 57 upvotes also uses Jquery as the primary solution. I don't think it's far to downvote an answer because it uses a library. It's an answer, regardless of how the result was obtained. – A Friend Nov 18 '20 at 16:42
@AFriend, don't assume I down voted. I simply left a comment, over a year ago. – Jon P Nov 18 '20 at 21:30
@JonP I was only directing the first sentence of my comment at you, bud. – A Friend Nov 19 '20 at 22:14

How to submit 0 if checkbox is unchecked and submit 1 if checkbox is checked in HTML

3 Answers3

Linked