How to submit 0 if checkbox is unchecked and submit 1 if checkbox is checked in HTML
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>
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.
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.