확인란 선택에 따른 서식 수

설명하기가 쉽고 간단한 질문을하기 위해 다소 단순화 된 버전의 문제입니다.확인란 선택에 따른 서식 수

<input type="text" class="cert" /><input type="text" class="cost"> 
<input type="text" class="cert" /><input type="text" class="cost"> 
<input type="text" class="cert" /><input type="text" class="cost"> 
... 

<input type="text" id="total" />

<input type="checkbox" class="checker" value="1" /> 
<input type="checkbox" class="checker" value="2" /> 
<input type="checkbox" class="checker" value="3" /> 
...

내가 입력 필드 Y 번호 (X> Y) 하단 후 총 2 열 CERT 비용을 가지고

내가 X 체크 박스를 사용자는 모든 확인란의 조합을 선택할 수 있습니다 (최대 Y까지). 체크 박스를 선택하면 값이 첫 번째 빈 인증서 입력에 입력됩니다. 인증서 값에 따라 해당 비용이 인접한 비용 입력에 입력됩니다 (예 : cert 1 = 비용 50, cert 2 = 비용 100 등).

확인란이 선택되지 않은 경우 비용과 마찬가지로 해당 인증서가 지워집니다.

하단의 합계는 어떤 것에 대한 누적 합계를 유지합니다.

몇 가지 추가 참고 사항 :

체크 박스는 없습니다 하나의 연속적인 순서로 양식을 통해 이격되어있다.
마찬가지로 cert와 cost 입력은 실제로 HTML과 나란히 있지 않지만 (화면에 표시되는 것처럼 보이지만), 그 사이에 다른 코드가 있습니다.

나는 대부분 엉망진창이되어 도움/의견을 보내 주시면 대단히 감사하겠습니다!

출처

2012-08-29 leshank

그래서 ... 문제는 무엇입니까? – Polyov

입력 요소 ID를 부여 했습니까? 그것은 아마도 서로를 구별 할 수있는 첫 걸음 일 것입니다. –

시도한 것을 보여줄 수 있습니까? – Touki

다음은 나와 함께 시작하는 것입니다. cert 1cert 2이 텍스트 상자 안에 들어가거나 라벨 등이 있는지 확실하지 않습니다. 당신의 비용과 같습니다. 그러나 이것이 그 예에서 제가 한 방법입니다. 이것은 일련의 입력 (cert & 비용)과 동일한 양의 체크 박스가 있다고 가정합니다.

$('input.checker').change(function(){ 
    // store the current index so we can pick which text input to change 
    var $i = $(this).index('input.checker'); 
    // put val in corresponding cert text input 
    $('input.cert').eq($i).val(this.checked ? 'cert ' + ($i+1) : ''); 
    // put val in corresponding .cost text input 
    $('input.cost').eq($i).val(this.checked ? 'cost ' + (50 * ($i+1)) : ''); 

    var total = 0; 
    // loop through the cost inputs and add up total 
    $('input.cost').each(function(i,v){ 
     total += (+$(v).val().replace('cost ','')); 
    }); 
    // insert total 
    $('#total').val(total); 
});

EXAMPLE FIDDLE

출처

2012-08-29 15:47:42

확인란 선택에 따른 서식 수

답변

관련 문제