Question

当我选中一个框时，我需要有一些内容，它会弹出一个描述，它会说点击这里将它添加到你的“总数”。我现在拥有的是：

第一个之后的方框也不在顶部。

Answer 1

试试这段代码：

<!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>

您也可以设置警报框的样式：
在这里查看jsFiddle：http://jsfiddle.net/8cypx/12/

Answer 2

您可以通过jQuery对话框来理解这一点，但是confirm可以解决这个问题：

$(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
    });
});

以下是演示：http://jsfiddle.net/mJA8c/

<强>更新

对于咯咯笑，这是一个使用jQuery对话框有点想象的演示：http://jsfiddle.net/mJA8c/1/

<强>更新

CSS问题是由jQuery在追加对话框时添加第二个div元素引起的（dunno为什么）。解决方案似乎是首先附加动态创建的div元素，然后在其上调用.dialog：

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

与原作相反：

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

这只会添加预期的div.ui-dialog。

更新了演示：http://jsfiddle.net/mJA8c/2/

复选框带有弹出窗口和说明

2 个答案: