-1

ボックスをチェックすると、説明がポップアップ表示され、ここをクリックして「合計」に追加すると表示されます。私が現在持っているのはこれです：

http://pastebin.com/gy64A44q

また、この最初のボックスの後のボックスは一番上に来ません。

4

2 に答える 2

0

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 の問題は、jQuerydivがダイアログを追加するときに 2 番目の要素を追加することが原因です (理由はわかりません)。解決策は、動的に作成されたdiv要素を最初に追加してから、それを呼び出す.dialogことです。

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

オリジナルとは対照的に：

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

これにより、意図した のみが追加されdiv.ui-dialogます。

更新されたデモ: http://jsfiddle.net/mJA8c/2/

于 2013-11-01T13:03:56.520 に答える
0

このコードを試してください：

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

于 2013-11-01T12:35:26.757 に答える