POST unchecked HTML checkboxes

Question

I've got a load of checkboxes that are checked by default. My users will probably uncheck a few (if any) of the checkboxes and leave the rest checked.

Is there any way to make the form POST the checkboxes that are not checked, rather than the ones that are checked?

Answer 1

What I did was a bit different. First I changed the values of all the unchecked checkboxes. To "0", then selected them all, so the value would be submitted.

function checkboxvalues(){
  $("#checkbox-container input:checkbox").each(function({ 
    if($(this).prop("checked")!=true){
      $(this).val("0");
      $(this).prop("checked", true);
    }
  });
}

Answer 2

The solution I liked the most so far is to put a hidden input with the same name as the checkbox that might not be checked. I think it works so that if the checkbox isn't checked, the hidden input is still successful and sent to the server but if the checkbox is checked it will override the hidden input before it. This way you don't have to keep track of which values in the posted data were expected to come from checkboxes.

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

Answer 3

Example on Ajax actions is(':checked') used jQuery instead of .val();

            var params = {
                books: $('input#users').is(':checked'),
                news : $('input#news').is(':checked'),
                magazine : $('input#magazine').is(':checked')
            };

params will get value in TRUE OR FALSE..

Answer 4

There is a better workaround. First of all provide name attribute to only those checkboxes that are checked. Then on click submit, through a JavaScript function you check all unchecked boxes . So when you submit only those will be retrieved in form collection those who have name property.

  //removing name attribute from all checked checkboxes
                  var a = $('input:checkbox:checked');
                   $(a).each(function () {
                       $(this).removeAttr("name");        
                   });

   // checking all unchecked checkboxes
                   var b = $("input:checkbox:not(:checked)");
                   $(b).each(function () {
                       $(this).attr("checked", true);
                   });

Advantage: No need to create extra hidden boxes,and manipulate them.

Answer 5

jQuery version of @vishnu's answer.

if($('#testName').is(":checked")){
    $('#testNameHidden').prop('disabled', true);
}

If you are using jQuery 1.5 or below please use the .attr() function instead of .prop()

Answer 6

You can also intercept the form.submit event and reverse check before submit

$('form').submit(function(event){
    $('input[type=checkbox]').prop('checked', function(index, value){
        return !value;
    });
});