Wie man den Wert des Kontrollkästchens mit dem Wert des Textfelds

Question

hinzufügen Ich möchte den Wert von mehreren Kontrollkästchen mit textbox(id=TextBox1) hinzufügen und es in textbox(id=TextBox2) ohne Verwendung einer Schaltfläche anzeigen. Beispiel: Wenn im checkbox1 und checkbox3 so die gesamte Auswahl würde 30 sein, und es wird mit textbox1 hinzugefügt werden (die autopopulated Benutzer nicht bearbeitet werden können) und Afterthat sollte es ohne Verwendung einer beliebigen Taste

 <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

in textbox2 angezeigt wenn Sie C# verwenden möchten, müssen Sie Änderungen an Postback und aktualisieren Sie die Inhalte von TextBox2:

ASP.NET/C# (serverseitig)

<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"/> 

-Code hinter:

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(); 
} 

Aber ich würde jQuery für diese Aufgabe bevorzugen:

Edit: da Sie fragten, die freundlich für einige Code jQuery, hier ist es:

jQuery (clientseitig)

Bemerkung: Das Attribut "value" wird nicht ingeschriebens in der HTML-Ausgabe. Sie könnten stattdessen data-value verwenden, dann wird die Eingabe in ein span mit dem angegebenen data-value-Attribut eingebettet.

<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> 

Dies ist quick'n'dirty aber ich halte es an Ihnen, diesen Ansatz mit den anderen Antworten zu kombinieren mit $.each

Answer 2

Diese Antwort ist js mit html. Ich hoffe, es wird auch für Ihre asp arbeiten

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