チェックボックスの値をテキストボックスに追加する方法

Question

ここでは、複数のチェックボックスの値をtextbox(id=TextBox1)に追加し、ボタンを使用せずにtextbox(id=TextBox2)に表示したいと考えています。 例は：イムcheckbox1とcheckbox3を選択した場合ので、合計が30になり、それはtextbox1を添加（autopopulatedされ、ユーザがそれを編集することはできません）され、それがいずれかのボタン

 <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

を用いずtextbox2に表示されるべきであるafterthatあなたは、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 （クライアント側）

備考：属性「値」はに書き込まれませんhtml出力にがあります。 data-valueを代わりに使用すると、指定されたdata-value属性を持つspanの内部に入力が埋め込まれます。

<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ですが、私はこの答えは、HTMLとJSで$.each

Answer 2

を使用して他の回答で、このアプローチを組み合わせることがあなたにそれを維持します。私はそれは同様

$(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' />