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

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

jquery html checkbox

Jquery 带有弹出窗口和说明的复选框,jquery,html,checkbox,Jquery,Html,Checkbox,我需要有一些东西，当我选中一个框，它会弹出一个描述，它会说点击这里添加到你的“总数”。我目前拥有的是：第一个框后面的框也不在顶部。请尝试以下代码： <!DOCTYPE html> <html> <head> <title>checkbox</title> <script type="text/javascript"> function checkmy() { if (!document

我需要有一些东西，当我选中一个框，它会弹出一个描述，它会说点击这里添加到你的“总数”。我目前拥有的是：

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

请尝试以下代码：

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


复选框
函数checkmy（）{
如果（！document.form.agree.checked）{
missinginfo=“您必须同意”；
警报（missinginfo）；
返回false；
}
否则{
警报（“文本信息”）；
返回true；
}
}
准备好购物了吗

您还可以设置警报框的样式：

在这里查看jsFiddle:

您可以通过jQuery对话框来想象这一点，但是一个

确认

就可以做到这一点：

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

下面是一个演示：

更新：

对于傻笑，这里有一个使用jQuery对话框设计的演示：

更新：

CSS问题是由jQuery在附加对话框时添加第二个

div

元素引起的（不知道为什么）。解决方案似乎是首先附加动态创建的

div

元素，然后对其调用

.dialog

：

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

$（“”）.appendTo（'body'）。对话框({
...
});

与原件相反：

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

$（''）。对话框({
...
}).附于（“主体”）；

这仅添加预期的

div.ui-dialog

更新的演示：

我不需要sumbit按钮，我需要在他们选择它时弹出窗口（如果可能），然后使用.change事件

$（“#同意”）.change（函数（）{alert（'Handler for.change（）called.'）；}）皮特，太好了！我只是对jquery css有一个问题，我得到了这一行：这一行是：你能发布一个到问题页面的链接，或者发布一个再现问题的JSFIDLE吗？如果你不能发布链接或设置一个fiddle，你至少能发布你问题中的css的其余部分吗？您的原始帖子没有使用class=“ui dialog content ui widget content”
或style=“display:block；”“
指定任何div
元素（我可能添加的是div
元素的默认显示，因此可能是多余的…）抱歉，这里的回复太晚了：如果我删除该行，它将不会正确显示弹出窗口，该弹出窗口是使用jQueryUI库中定义的对话框
函数创建的。如果删除库，则不会定义该对话框，也无法显示该对话框。你遇到的CSS问题呢？