Изменить текстовое поле формы в зависимости от количества установленных флажков

Question

Полное раскрытие: я новичок в java / jquery, но это кажется как проблема с простым решением. Я огляделся по сторонам и не смог найти аналогичной ситуации, но если об этом уже есть сообщение, дайте мне знать.

Я создал форму с контрольным списком продуктов и полем кода скидки. Как бы я хотел, чтобы все работало, когда вы нажимаете «Отправить»:

1. Если вы нажмете 3 или менее, вы не получите скидку
2. Если вы нажмете любую 4, применяется «Скидка 1»
3. Если нажать любую 5, применяется «Скидка 2»
4. Если вы нажмете любую 6, применяется «Скидка 3»

Я получил его для работы с окном оповещения, но, похоже, мне нужен другой бит кода, чтобы изменить значение текстового поля на скидку?

Спасибо за вашу помощь!

Вот урезанный код, который у меня есть:

function check(){
count = 0;
for(x=0; x<document.signup.getElementsByClassName("styled").length; x++){
    if(document.signup.getElementsByClassName("styled")[x].checked==true){
    count++
    }
}

if(count<3){
    alert("No Discount");
}
else if(count==3){
    alert("Discount1");
}
else if(count==4){
    alert("Discount2");
}
else if(count==5){
    alert("Discount3");
}
else if(count==6){
    alert("Discount4");
}
}

<form name="signup" id="form1" method="post" action="">
<input type="checkbox" id="product1"  name="product_id[]" value="1" class="styled">
<input type="checkbox" id="product2"  name="product_id[] "value="3" class="styled">
<input type="checkbox" id="product3"  name="product_id[]" value="2" class="styled">
<input type="checkbox" id="product4"  name="product_id[]" value="4" class="styled">
<input type="checkbox" id="product5"  name="product_id[]" value="44" class="styled">
<input type="checkbox" id="product6"  name="product_id[]" value="45" class="styled">        
<input type="text" name="coupon" id="f_coupon" value="" size="15" />
<input type="button" name="Button" value="Click Me" onclick="check()" />

-j.

Answer 1

Сохранить входные данные в переменной, т.е. var inputs = $('input[type="checkbox"]); тогда вы можете проверить количество проверенных входов по inputs.filter(':checked').length и делать что-то на основании этого

например

var inputs = $('input[type="checkbox"]');
var textField = $('input#f_coupon');

$('form').submit(function(){
  var count = inputs.filter(':checked').length;
  if (count > 3) {
    // do stuff
    // ie.
    textField.val(count); 
  }
}); 

Answer 2

jQuery( '#form1' ).submit( function(){
    jQuery( '#f_coupon' ).val( 'Discount ' + jQuery( '.styled:checked' ).length );
} );

Кстати, Java - это не JavaScript , для каждого требуется , а теги input ничего не могут сделать с данными контента, поэтому вы должны закрывать их как !