가격을보고 추가하는 방법은 클릭 한 확인란에 달려 있습니다.

전체 필드에서 선택란의 가격을 보려면 어떻게해야합니까? 예를 들어, 사용자가 20 달러의 가격으로 가격 1을 검사하면 페이지를 새로 고치지 않고 총계 필드에 20 달러가 자동으로 추가되어 표시됩니다. 그런 다음 사용자는 $ 30의 가격으로 가격 2를 확인한 다음 총계 필드에 추가됩니다. 그러면 사용자가 마음을 바꾸고 가격 2의 선택을 취소하면 총 가격에 가격 1 (20 달러)이 포함됩니다.가격을보고 추가하는 방법은 클릭 한 확인란에 달려 있습니다.

사용자가 선택한 모든 확인란의 선택을 취소 한 경우 아무 것도 선택되지 않으므로 총 필드는 0이어야합니다.

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

나는 그것을 위해 코드를 모르는 :

이 내 HTML 코드입니다 (어떤 페이지를 새로 고침하지 않음). 어떤 도움을 주셔서 감사합니다.

출처

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

http://jsfiddle.net/9fe9wonx/ 당신의 도움에 감사드립니다. 코드가 잘 작동합니다! 나는 또한 그것이 어떻게 작동 하는지를 이해한다. 고마워요! – Ejardy

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

데모를보십시오 :

출처

2014-09-04 07:09:41

가격을보고 추가하는 방법은 클릭 한 확인란에 달려 있습니다.

답변

관련 문제