Search code examples
phphtmlcheckbox

Make checkbox return false when unchecked


I have a form looking like:

<form>
    <input type"checkbox" name="checked[(unique_id)]">
    <input type"checkbox" name="checked[(unique_id)]">
    <input type"checkbox" name="checked[(unique_id)]">
    <input type"checkbox" name="checked[(unique_id)]">
</form>

The number of checkboxes will variate from time to time so when processing this data with PHP I have to loop the _POST['checked'] array.

My problem is that I want to take actions both when a checkbox is checked and when it's not. But only the the checked checkboxes will be added to the _POST['checked'] array.


Solution

  • <form>
        <input type="checkbox" key="1"/>
        <input type="hidden" name="checked[1]" value="false">
        <input type="checkbox" key="2"/>
        <input type="hidden" name="checked[2]" value="false">
        <input type="checkbox" key="3"/>
        <input type="hidden" name="checked[3]" value="false">
        <input type="checkbox" key="4"/>
        <input type="hidden" name="checked[4]" value="false">
    </form>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('[key]').change(function () {
                var key = $(this).attr('key');
                $($('[name="checked[' + key + ']"]')).val($(this).is(':checked') ? 'true' : 'false');
            });
        });
    </script>
    

    here is what i'm doing

    i'm using two inputs one is checkbox without name so it won't be sent to php , the other is hidden won't be shown to the user but it is what will be sent to php

    then with jquery when the user check the box jquery change the value of the hidden input to true and when uncheck it change the value to false

    so the value will always be send to the php with value true or false as string

    you can change the value you want to send to php by changing this .is(':checked')?'true':'false') to something like that .is(':checked')?1:0) to send 1 and 0 instead of true and false

    another solution is rybo111 solution

    <input type="hidden" name="check" value="false">
    <input type="checkbox" name="check" value="true">
    

    it will send the two options but if the checkbox is checked it will override the first option

    but it is not reliable 100% and it will send more data to the server

    read more about that in POSTing Form Fields with same Name Attribute

    so if you want to use simple solution without js use the "html only" if you want 100% reliable solution use the "js"