Question

I have the following Jquery functions and it only works when the page is refreshed, notwhen I click a particular checkbox. Currently when I click a checkbox it does not do anything. How do I make the checkbox do something then?

(function($) {
    $(document).ready(function() {
        alert("nyah nyah! I’m able to use '$'!!!!");
        var $b = $('input[type=checkbox]');
        alert($b.find(':checked').length); 
        alert($b.filter(':not(:checked)').length);

        function checkPrice() {
            alert($b.filter(':checked').length);
        }

        $("#keywordForm").submit(function(e) {
            e.preventDefault();
            var option_form = jQuery(e.target);
            <!--alert("sometext");-->
            updateKeywords(e);
        })

        $("#updateKeyword").submit(function(e) {
            e.preventDefault();
            var keyword_form = jQuery(e.target);
            refreshKeywords(e);
        })

        function refreshKeywords(e) {
            e.preventDefault();

Checkbox HTML:

List of Keywords available for subscription

                        <table id="checkKeywords">
                            <tbody>
                                {% for keyword in keyword_list %}
                                    {% if forloop.counter|divisibleby:"3" %}
                                            <tr>
                                    {% endif %}
                            <td>
                                <input type="checkbox" id="validate" name="cb" onclick = checkPrice(this) value="{{keyword.keyword_name}}" />  {{keyword.keyword_name}}
                            </td>
                                    {% if forloop.counter|add:"1"|divisibleby:"3" %}
                                            </tr>
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>                

Answer 1

If you want to do something when the checkbox is clicked on, you need to bind a callback function to the change event using the .change() function, like this:

$('selector for checkbox(es)').change(function(e) {
    // do your stuff here
});

You could also use the click event, but that doesn’t recognise the value being changed using the keyboard in all browsers, so it’s probably best not to.