根据选中的复选框数更改表单的文本字段

时间:2011-12-21 21:51:02

标签: javascript jquery forms

完全披露:我是一个java / jquery新手,但这个似乎就像一个简单解决方案的问题。我环顾四周,找不到类似的情况,但是如果有关于此的帖子,请告诉我。

我创建了一个包含产品清单和折扣代码框的表单。点击提交时我希望如何工作:

  1. 如果您点击任何3或更少,您将获得折扣
  2. 如果您点击任意4,请应用“折扣1”
  3. 如果您点击任意5,请应用“Discount 2”
  4. 如果您点击任何6,请应用“Discount 3”
  5. 我已经使用了一个警告框,但似乎我需要一些不同的代码才能将文本框的值更改为折扣?

    感谢您的帮助!

    这是我到目前为止的精简代码:

    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。

2 个答案:

答案 0 :(得分: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); 
  }
}); 

答案 1 :(得分:0)

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

Btw,Java is not JavaScript,每个&lt; form&gt;需要&lt; / form&gt;和输入标签无法对内容数据执行任何操作,因此您应关闭它们,例如&lt; input /&gt;!