Question

The Problem
I am trying to run some ajax on one my pages for my website, basically I have three checkboxes all of which on pageload are unselected, when a checkbox is clicked I need to be able load in via ajax the relevant HTML. This system is currently a PHP script that depending on what the POST is set returns a different view, so I think all I need to is send the POST via AJAX, but I need to do everytime a new checkbox is checked.

My HTML looks like this,

    div class="segment">
               <div class="label">
                <label>Choose region: </label>
               </div>


<div class="column w190">
                    <div class="segment">
                        <div class="input">
                            <input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Nationwide]" id="inp_Nationwide">
                        </div>
                        <div class="label ">
                            <label for="inp_Nationwide">Nationwide</label>
                         </div>
                        <div class="s">&nbsp;</div>
                    </div>

</div>

<div class="column w190">
                    <div class="segment">
                        <div class="input">
                            <input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Lancashire]" id="inp_Lancashire">
                        </div>
                        <div class="label ">
                            <label for="inp_Lancashire">Lancashire</label>
                         </div>
                        <div class="s">&nbsp;</div>
                    </div>

</div>

<div class="column w190">
                    <div class="segment">
                        <div class="input">
                            <input type="checkbox" checked="checked" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
                        </div>
                        <div class="label ">
                            <label for="inp_West_Yorkshire">West Yorkshire</label>
                         </div>
                        <div class="s">&nbsp;</div>
                    </div>
               <div class="s">&nbsp;</div>
       </div>
</div>

My current attempt was to ascertain whether the input has been clicked so I have done this with my javascript, though this is probably wrong,

$('input.radio').click(function(){
        if($(this).hasClass('clicked')) {
            $(this).removeClass('clicked');
        } else {
            $(this).addClass('clicked');
        }
    });

Answer 1

You can do

    $('input.radio').change(function(){ // will trigger when the checked status changes
            var checked = $(this).attr("checked"); // will return "checked" or false I think.
            // Do whatever request you like with the checked status
    });

Also, if you say

three checkboxes all of which on
pageload are unselected

They should have checked=""