帶彈出框和說明的複選框

-1

我需要有東西時，我檢查一個盒子，它會彈出一個描述，它會說，點擊這裏將它添加到你的「總」。我現在有這就是：帶彈出框和說明的複選框

而且箱子後，這第一個不來的頂部。

2013-11-01 Tim Jake

你能看上這個了一個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/

UPDATE：

對於笑聲，這裏是有點幻想了使用jQuery對話框演示：http://jsfiddle.net/mJA8c/1/

UPDATE：

的CSS問題由jQuery在追加對話框時添加第二個div元素（不知道爲什麼）。該解決方案似乎是動態創建的div元素首先附加，然後調用.dialog它：

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

，而不是原來的：

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

這隻會增加預期div.ui-dialog。

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

來源

2013-11-01 13:03:56 pete

Pete，這很完美！我只是有問題的jQuery的CSS我得到這一行：http://puu.sh/55ABH.png線是：

–

你可以發佈一個鏈接到問題頁面，或張貼jsFiddle重現問題？ – pete

如果您無法發佈鏈接或設置小提琴，您至少能夠在問題中發佈CSS的其餘部分嗎？你原來的文章沒有用'class =「ui-dialog-content ui-widget-content」'或'style =「display：block;」'指定任何'div'元素（我可能會添加' div'元素，所以它可能是多餘的......） – pete

試試這個代碼：

<!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-01 12:35:26 Sandy

我不需要透過按鈕，我需要彈出時，他們選擇它如果可能的話 –

然後用** **改變事件'$（「＃同意」）。改變（function（）{ alert（'Handler for .change（）called。'）; }）;' – Sandy

帶彈出框和說明的複選框

回答

相關問題