如何使複選框的值與文本框的值相加

Question

這裏我想添加多個複選框的值與textbox(id=TextBox1)，並在不使用任何按鈕的情況下將其顯示在textbox(id=TextBox2)中。 例如：如果即時通訊選擇checkbox1和checkbox3所以總將是30，它就會與textbox1被添加（其autopopulated用戶不能編輯）和afterthat應當顯示在textbox2而不使用任何按鈕

 <div> 
     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
     <asp:CheckBox ID="CheckBox1" runat="server" value="5"/> 
     <asp:CheckBox ID="CheckBox2" runat="server" value="15"/> 
     <asp:CheckBox ID="CheckBox3" runat="server" value="25"/> 
     <asp:CheckBox ID="CheckBox4" runat="server" value="35"/> 

     <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
    </div> 

Answer 1

如果你要使用C＃，你需要回傳的變化和刷新TextBox2內容：

ASP.NET/C#（服務器端）

<asp:CheckBox ID="CheckBox1" runat="server" value="5" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"/> 
<asp:CheckBox ID="CheckBox2" runat="server" value="15" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"/> 
<asp:CheckBox ID="CheckBox3" runat="server" value="25" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"/> 
<asp:CheckBox ID="CheckBox4" runat="server" value="35" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"/> 

後面的代碼：

protected void CheckBox1_CheckedChanged (object sender, EventArgs e) 
{ 
    int sum = Convert.ToInt32(this.TextBox1.Text); 
    if (this.CheckBox1.Checked) sum += Convert.ToInt32(this.CheckBox1.Attributes["value"]); 
    if (this.CheckBox2.Checked) sum += Convert.ToInt32(this.CheckBox2.Attributes["value"]); 
    if (this.CheckBox3.Checked) sum += Convert.ToInt32(this.CheckBox3.Attributes["value"]); 
    if (this.CheckBox4.Checked) sum += Convert.ToInt32(this.CheckBox4.Attributes["value"]); 
    this.TextBox2.Text = sum.ToString(); 
} 

但我寧願jQuery的完成這個任務：

編輯：既然你問那慈祥一些jQuery代碼，那就是：

的jQuery （客戶端）

備註：屬性「value」不會被寫入input在html輸出中。您可以使用data-value來代替，然後輸入將被嵌入在span內，並具有指定的data-value屬性。

<script> 
    function clientclick() { 
     var tb = $("#<%=TextBox1.ClientID %>"); 
     var sum = parseInt(tb.val()); 
     var cb = $("#<%=CheckBox1.ClientID %>"); 
     if (cb.is(":checked")) sum += parseInt(cb.parent("*[data-value]").data("value")); 
     cb = $("#<%=CheckBox2.ClientID %>"); 
     if (cb.is(":checked")) sum += parseInt(cb.parent("*[data-value]").data("value")); 
     cb = $("#<%=CheckBox3.ClientID %>"); 
     if (cb.is(":checked")) sum += parseInt(cb.parent("*[data-value]").data("value")); 
     cb = $("#<%=CheckBox4.ClientID %>"); 
     if (cb.is(":checked")) sum += parseInt(cb.parent("*[data-value]").data("value")); 
     $("#<%=TextBox2.ClientID %>").val(sum); 
    } 
</script> 

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
<asp:CheckBox ID="CheckBox1" runat="server" data-value="5" onclick="clientclick()"/> 
<asp:CheckBox ID="CheckBox2" runat="server" data-value="15" onclick="clientclick()"/> 
<asp:CheckBox ID="CheckBox3" runat="server" data-value="25" onclick="clientclick()"/> 
<asp:CheckBox ID="CheckBox4" runat="server" data-value="35" onclick="clientclick()"/> 
<asp:TextBox ID="TextBox2" runat="server" ></asp:TextBox> 

這是quick'n'dirty，但我把它給你這種方法與其他答案相結合使用$.each

Answer 2

這個答案是JS與HTML。我希望它會爲你的ASP工作以及

$(document).ready(function() { 
 
var sum; 
 
$("input:checkbox[name=vehicle]").change(function(){ 
 
\t sum=0; 
 
    $("input:checkbox[name=vehicle]:checked").each(function(){ 
 
    sum=sum+parseInt($(this).val()) 
 
}); 
 
var txtValue=parseInt($('#txt1').val()); 
 
$('#txt2').val(txtValue+sum) 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<input type="checkbox" name="vehicle" value="5">5<br> 
 
<input type="checkbox" name="vehicle" value="15">15<br> 
 
<input type="checkbox" name="vehicle" value="25">25<br> 
 
<input type="checkbox" name="vehicle" value="35">35<br> 
 

 
<input type='text' id='txt1' value='0' /> 
 
<input type='text' id='txt2' />