Aquí quiero agregar el valor de la casilla de verificación múltiple con textbox(id=TextBox1) y mostrarlo en textbox(id=TextBox2) sin usar ningún botón. ejemplo: si estoy seleccionando checkbox1 y checkbox3, entonces el total sería 30 y se agregará con textbox1 (que el usuario autopoblado no puede editar) y luego debe mostrarse en { {X5}} sin usar ningún botón

     <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>
0
Bunny 8 mar. 2017 a las 09:48

2 respuestas

La mejor respuesta

Si desea usar C #, debe devolver los cambios y actualizar el contenido de TextBox2:

ASP.NET/C# (lado del servidor)

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

Código detrás:

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

Pero preferiría jQuery para esta tarea:

Editar: ya que estaba pidiendo amablemente algún código jQuery, aquí está:

JQuery (lado del cliente)

Observación : el atributo "valor" no se escribirá en input s en la salida html. En su lugar, puede usar data-value, luego la entrada se incrustará dentro de un span con el atributo data-value especificado.

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

Esto es rápido y fácil, pero me corresponde a usted combinar este enfoque con las otras respuestas usando $.each

0
Stephan Bauer 8 mar. 2017 a las 10:28

Esta respuesta es js con html. Espero que funcione para tu asp también

$(document).ready(function() {
var sum;
 $("input:checkbox[name=vehicle]").change(function(){
	 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' />
0
Ritz 8 mar. 2017 a las 07:26