JQuery Checkbox Handling

JavaScript
1

Hi Everyone,

I hope I’m posting this in the right place!

I have a question about Jquery and checkboxes. I have never worked with JQuery before but basically I have a checkbox and it will be set to “checked” by default when the user enters the page. I want jquery to detect that it is checked which will then trigger a separate function.

I’ve only been able to get this to work when the user clicks on the check box but I don’t want it to do that. All this will should be done without the user touching anything.

Here is a function that I have which doesn’t work :

if ($(‘#discount:checked’).val!== null) {
changeprice();
};

Thank you in advance!

2

May we have a look at a test page?

3

There is just a simple problem with your code, you’re not actually calling the [FONT=“Courier New”]val()[/FONT] function in your if statement.

This should work:

if ($("#discount:checked").val() !== null)

You could also use the jQuery [FONT=“Courier New”]is()[/FONT] function for something like that, which would probably read a bit nicer in the code:

if( $("#test").is(":checked") )
4

Hi Paul,

Unfortunately I am not allowed to post up the page but here are some screenshots!

So the problem that is incurring is on the last line where it says ‘10% Early-Bird Discount…’

This is what I want it to look like when the user enters the page:

Here, a function was triggered so the discount is applied.

And this is what I am getting right now. I set the checkbox to “checked” but the function is not triggered when you load the page therefore the amount is $0.00 on the right side (and the total is incorrect too!)

And of course when you unclick it it shows this

Right now the checkbox thing only changes the amount on the right is when I use the onclick function.

I hope my explanation was clear!

5

AussieJohn’s suggestion should help, there can be other things that get in the way of a working solution.

For example, is the jQuery code being run before the form exists?

6

Thank you AussieJohn!
I tried your codes but the function is still not being triggered.

Paul, I think you are right. The JQuery code and all the other calculations being made in relation to the Amount column is running before the form.

The form itself (input fields and everything) is the last thing in my code.

I tried putting the code on the line below my input tags but it is not triggering the function still. (My function is written before the form)

<td valign="middle">
<input id="test" type="checkbox" value="0.00" checked>
<i>10% Early-Bird Discount if registering before November 19, 2010</i>
</td>
<td align="right">
$<span id="price">0.00</span><input id="price_input" name="price_input" value="0.00" style="display:none">
</td>


<script type="text/javascript">

if( $("#test").is(":checked") ){

myfunction();

}
</script>

Could this be because the jquery cannot find the function?

7

A common practice is to enclose jQuery code in a callback function, so that jQuery delays running the code until the page is ready.


$(function () {
    if ($("#test").is(":checked")) {
        alert('#test is checked');
    }
});
8 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var checkboxs = $(":checkbox[name=chks]");
            var disCountChk = $("#disCount");
            var totalSpan = $("#totalSpan");
            RandomChk();

            checkboxs.click(ClickFn);
            disCountChk.click(ClickFn);

            ClickFn();
            //Click Function
            function ClickFn() {
                var total = GetTotalVal();
                if (disCountChk.attr("checked")) {
                    total = Number(total * (1 - disCountChk.val())).toFixed(2);
                }
                totalSpan.html("total:$" + total);
            }

            //Get the total price of the checked items
            function GetTotalVal() {
                var val = 0;
                checkboxs.filter(":checked").each(function (i, n) {
                    val += parseInt($(n).val());
                });
                return val;
            }

            //Random Checked
            function RandomChk() {
                var count = checkboxs.length - 2;
                var chkCount = Rand(count);
                var i = 0;
                while (i < chkCount) {
                    checkboxs.eq(i).attr("checked", true);
                    i++;
                }
                var disChk = RndBoolean();
                disCountChk.attr("checked", disChk == 0);
            }
            
            function RndBoolean() {
                return Math.random() < 0.5;
            }
            function Rand(number) {
                return Math.ceil(Math.random() * number);
            };
        });

       

    </script>
</head>
<body>
    <input type="checkbox" name="chks" id="checkbox1" value="1" />
    <label for="checkbox1">
        $1</label>
    <br />
    <input type="checkbox" name="chks" id="checkbox2" value="2" />
    <label for="checkbox1">
        $2</label><br />
    <input type="checkbox" name="chks" id="checkbox3" value="3" />
    <label for="checkbox1">
        $3</label><br />
    <input type="checkbox" name="chks" id="checkbox4" value="4" />
    <label for="checkbox1">
        $4</label><br />
    <input type="checkbox" name="chks" id="checkbox5" value="5" />
    <label for="checkbox1">
        $5</label><br />
    <input type="checkbox" name="chks" id="checkbox6" value="6" />
    <label for="checkbox1">
        $6</label><br />
    <input type="checkbox" name="chks" id="checkbox7" value="7" />
    <label for="checkbox1">
        $7</label><br />
    <input type="checkbox" name="chks" id="checkbox8" value="8" />
    <label for="checkbox1">
        $8</label><br />
    <input type="checkbox" name="chks" id="checkbox9" value="9" />
    <label for="checkbox1">
        $9</label><br />
    <input type="checkbox" id="disCount" value="0.1" />
    <label for="checkbox1">
        10% Discount</label><br />
    <span id="totalSpan">total:$0</span>
</body>
</html>

I hope this is what you want.