如何查看和添加價格取決於點擊複選框

如何查看Total字段中選中複選框的價格。例如，用戶以$ 20的價格檢查價格1，$ 20將自動添加到總計字段中，而不刷新頁面並顯示它。然後，用戶還將以30美元的價格檢查價格2，然後將其添加到總計字段。那麼如果用戶改變主意並取消選中價格2，那麼現在的總價格將僅包含價格1的價值，即$ 20。如何查看和添加價格取決於點擊複選框

如果用戶取消選中所有選中的複選框，則總計字段必須爲零，因爲沒有選中任何內容。（沒有刷新頁面）

這是我的html代碼：

<form action="" method="post"> 
     <input type="checkbox" name="checkbox1" value="$20"> Price 1 </br> 
     <input type="checkbox" name="checkbox1" value="$30"> Price 2 </br> 
     <input type="checkbox" name="checkbox1" value="$40"> Price 3 </br> 
     </br></br> 
     Total: <input type="text" name="total" disabled="true"> 

</form>

我不知道它的代碼。任何幫助表示讚賞。

來源

2014-09-04 Ejardy

試試這個代碼

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=utf-8 /> 
    <title></title> 
    <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <form action="" method="post"> 
     <input type="checkbox" name="checkbox1" value="$20"> Price 1 </br> 
     <input type="checkbox" name="checkbox1" value="$30"> Price 2 </br> 
     <input type="checkbox" name="checkbox1" value="$40"> Price 3 </br> 
     </br></br> 
     Total: <input type="text" name="total" disabled="true"> 
    </form> 
    <script type="text/javascript"> 
    $(function(){ 
     //bind the change event to the checkboxes 
     $('input[name="checkbox1"]').change(function(){ 
      var total = 0; 
      //get value from each selected ckeck box 
      $('input[name="checkbox1"]:checked').each(function(){ 
       var tval = $(this).val(); 
       //remove $ sign from value 
       //convert it to a flot 
       //plus it to the total 
       total += parseFloat(tval.replace("$",""));     
      }); 
      //finally display the total with a $ sign 
      $('input[name="total"]').val("$ " + total); 
     }); 
    }); 
    </script> 
</body> 
</html>

來源

2014-09-04 07:09:40 Susantha

謝謝您的幫助。你的代碼很棒！我也理解它是如何工作的。非常感謝！ – Ejardy 2014-09-04 07:21:56

$('input[type="checkbox"]').change(function(){ 

    updateTotal(); 

}); 

function updateTotal(){ 
    var total = 0; 

    $('input[type="checkbox"]:checked').each(function(){ 


     total += parseFloat($(this).val()) 

    }) 


    $('#total').val('$ '+total); 
}

http://jsfiddle.net/Ljovcz1y/1/

來源

2014-09-04 07:03:53 Yann86

$(":checkbox").on('change', function(){ 
    makeSum(); 
}); 

function makeSum(){ 
    var totalVal = 0; 
    $(":checked").each(function(index, checkbox){ 
      totalVal += parseInt($(checkbox).val(), 10); 
    }); 
    $('input[name="total"]').val("$" + totalVal); 
}

演示：http://jsfiddle.net/9fe9wonx/

來源

2014-09-04 07:09:41

如何查看和添加價格取決於點擊複選框

回答

相關問題