JavaScript - 선택한 체크 박스를 기반으로 출력 값을 변경합니다.

Question

저는 JavaScript를 처음 사용하고 있으며 폼에 세 가지 가격 옵션을 체크 박스로 나열하는 코드를 작성하려고합니다. 처음 두 가지가 모두 선택되면 총 금액을 일정 금액만큼 내리고 싶습니다.

내 코드는이 문제의 코드를 기반으로합니다 : Javascript checkboxes incorrect calculating

그들은 날짜 변수가 기본 값을 다시 설정합니다. 만약 내가 그 두 상자가 확인되면 음수 값으로 기지를 설정하는 함수가 있다면, 그게 내가 원하는 것을 얻을 것이라고 가정합니다. 또한 출력물에 추가 태그가있을 경우 '월간 저장 (x)'이 발생합니다.

그러나 체크 박스에 변수를 연결하는 방법을 모르겠다. how to change the value of a variable based on a select option:selected에 따라 jquery를 사용해야합니까?

Answer 1

난 당신이 수정하는 있으리라 믿고있어 당신의 recalculate()은 이전 질문의 기능입니다.이 함수에서, 당신은 당신의 합계를 얻을 후, 할인 적용이 추가

if ($("#chkBox1,#chkBox2").filter(":checked").length == 2) 
{ 
    sum -= discount; 
} 

이 출력에 메시지를 작성하는 방법을,이에 $("#output").html(sum) 코드를 수정 :

$("#output").html(sum + " Save $" + discount + " per month"); 

Answer 2

if (document.getElementById('checkBox1').checked && document.getElementById('checkBox2').checked) { 
    // Change the price 
} 

Answer 3

이 문제를 해결할 수있는 방법은 다양합니다. 미리 들어가기 전에 클라이언트 측에서 '가격 계산'과 같은 작업을하지 마십시오. 즉, 가격을 계산하여 사용자를 표시 할 수 있지만 서버 측에서 실제 계산을 수행해야합니다 (고객이 양식 제출을 조정하고 조작 할 수 있으므로).

나는 체크 된 체크 박스의 결과를 집계하고 간단히 결과를 보여주는 간단한 예제를 만들었다. 이 코드를 용도에 맞게 조작 할 수있는 방법은 많이 있습니다. jQuery를 사용했지만이 문제에 대한 다른 흥미로운 옵션이 있습니다 (예를 들어 KnockoutJS를 확인하십시오).

<input type="checkbox" class="adjust one" data-value="1.00" id="so1" /> <label for="so1">$1.00</label> <br/> 
<input type="checkbox" class="adjust two" data-value="2.00" id="so2" /> <label for="so2">$2.00</label><br/> 
<input type="checkbox" class="adjust one" data-value="3.00" id="so3" /> <label for="so3">$3.00</label> 

<p> 
    Total: <span class="total"></span> 
</p> 

그런 다음 jQuery 라이브러리와 함께 다음 JavaScript를 포함하고자합니다.

var total; 

var calculateTotal = function() { 
    total = 0.0; 
    $('input[type="checkbox"]:checked').each(function() { 
     total += parseFloat($(this).data('value')); 
    }); 
    $('.total').text(total); 
}; 

$(document).ready(function() { 

    $('input[type="checkbox"]').live('change', function() { 
    calculateTotal(); 
    }); 

    calculateTotal(); //do it for initial price 
}); 

calculateTotal()는 셀렉터에 일치하는 체크 박스 (타입 체크 박스의 입력)에 따라 총을 계산합니다 "확인". 그런 다음 각 체크 박스에서 데이터 속성 "값"을 가져 와서 해당 숫자를 기반으로 합계를 계산합니다. 문제의 논리는 다를 수 있지만 단순히 calculateTotal을 조정하면이 문제를 해결해야합니다. 마지막으로, calculateTotal 함수는 체크 박스가 '변경'될 때마다 (그리고 처음에는 한 번) 호출됩니다.

이 정보가 도움이 될 수 있기를 바랍니다. 다음은 JSFiddle 라이브 데모입니다.

Answer 4

Jquery는 필요하지 않지만 항상 더하기입니다. 이후 자바 스크립트를 배우고있다, 나는 아직 프레임 워크를 사용하지 않는 것이 좋습니다 것입니다.

먼저 폼이 필요합니다 (당신이 양식의 모습을 우리에게 보여 있다면 더 좋을 것이다) : 이제

<form> 

<input type="checkbox" id="first" /><label for="first">First Box</label> <br> 
<input type="checkbox" id="second" /><label for="second">First Box</label> <br> 

<input type="text" id="output" value="5.00"/> 

</form> 

자바 스크립트

<script type="text/javascript"> 
    var first = document.getElementById("first"); 
    var second = document.getElementById("second"); 

    first.onchange = function() { 
    if (this.checked == true) { 
     document.getElementById("output").value = "new Value"; 
    }else { 
     document.getElementById("output").value = "other Value"; 
    } 
    } 

    ... the same can be done for 'second' .... 
</script>