-1

I need to have something when I check a box it will pop-up with a description and it will say click here to add it to ur "total". What I currently have is this:

http://pastebin.com/gy64A44q

Also the boxes after this first one doesn't come at the top.

4

2 回答 2

0

Try this code:

<!DOCTYPE html>
<html>
  <head>
   <title>checkbox</title>
   <script type="text/javascript">
     function checkmy() {
     if (!document.form.agree.checked) {
        missinginfo = "You must agree";
        alert(missinginfo);
        return false;
    }
    else {
        alert("Text information");
        return true;
    }
}
</script>
</head>
<body>
  <form name="form" method="post" action="#" onSubmit="return checkmy();">
   <input type="checkbox" name="agree" id="agree" value="agree_terms" class="terms">
   <label for="agree">ready to shop</label>
  <input type="submit" name="submit" value="Submit" class="submit">
</form>

You can style your alert box also:
Check out the jsFiddle here: http://jsfiddle.net/8cypx/12/

于 2013-11-01T12:35:26.757 回答
0

You could fancy this up with a jQuery dialog, but a confirm would do the trick:

$(window).load(function () {
    var total = $('#total').text('0'); // cache DOM lookup and set innerText
    $('input:checkbox').change(function () {
        var self = $(this), // cache DOM lookup
            val = parseFloat(self.val(), 10), // grab value
            isChecked = self.is(':checked'), // grab state
            tot = parseFloat(total.text(), 10), // parse current total
            wasAddedToTotal = self.data('wasAddedTotal'),
            addToTotal = isChecked ? confirm('Add this to your total?') : false;
        if (addToTotal && isChecked && !isNaN(val)) {
            tot += val;
            self.data('wasAddedTotal', true);
        } else if (wasAddedToTotal) {
            tot -= val;
        }
        total.text(tot); // set innerText
    });
});

Here's a demo: http://jsfiddle.net/mJA8c/

UPDATE:

For giggles, here's a demo somewhat fancied up using jQuery dialog: http://jsfiddle.net/mJA8c/1/

UPDATE:

The CSS problem is caused by jQuery adding a second div element when it appends the dialog (dunno why). The solution seems to be to append the dynamically created div element first, and then call .dialog on it:

$('<div />').appendTo('body').dialog({
    ...
});

as opposed to the original:

$('<div />').dialog({
    ...
}).appendTo('body');

This adds only the intended div.ui-dialog.

Updated demo: http://jsfiddle.net/mJA8c/2/

于 2013-11-01T13:03:56.520 回答