Why is the visual behavior for a WPF checkbox reversed when checking/unchecking?

The WPF (Windows Presentation Foundation) checkbox control has opposite visual behaviors for when it is checked and unchecked.

That is, when the mouse button is pressed, the check mark fades into view and stays when the mouse button is released. If pressed again, the check mark stays until the mouse button is released (at which point it then fades away).

Checking – Mouse Down
Checking (Mouse Down)

Checking – Mouse Up
Checking (Mouse Up)

Unchecking – Mouse Down
Unchecking (Mouse Down)

Unchecking – Mouse Up
Unchecking (Mouse Up)

This behavior reminds me how a mechanical toggle button works. The button is pushed in and clicks into place. When pushed again, it stays in place until you let it spring back out.

Is there a practical UX lesson to be learned here from this behavior?

Do these subtle visual cues add any value to the user’s experience?

Error al enviar el contenido de un checkbox

Hola estoy haciendo un programa usando xammp (php, mysqil) de punto de venta para mi tienda, pero eh tenido un problema, recientemente agregue al formulario una opción con un checkbox para descartar las compras que ya no desee un cliente pero esta al seleccionar digamos: Producto A Producto B Producto C

si deseo descartar el [b] el a si es tomando en cuenta pero el resto es ignorado este es el codigo de el formulario que lo ordenó por medio de una tabla:

$  ("#add").click(function(){                 $  ("#mensaje").html("");                 var tds=$  ("#tabla tbody tr:first td").length;                 var trs=$  ("#tabla tbody tr").length;                 var nuevaFila="<tr class='animated fadeInDown'>";                 nuevaFila+='<td><input type="checkbox" id="descartes'+(trs)+'" name="descarta[]" value="1"><label for="descartes'+(trs)+'">Descartar</label></td>';                 nuevaFila+='<td><input type="hidden" name="cprodu[]" id="cpro'+(trs)+'" /><input type="hidden" name="idProd[]" id="idp'+(trs)+'" /><input type="text" placeholder="Codigo" name="codProd[]" id="cod'+(trs)+'" disabled /></td>';                 nuevaFila+='<td><input type="text" class="typeahead tt-query" placeholder="Producto" name="desc[]" id="d'+(trs)+'" onchange="getInventario()" required/></td>';                 nuevaFila+='<td><input type="text" placeholder="Cantidad" class="cantidad" name="cantidad[]" id="c'+(trs)+'" autocomplete="off" onchange="getCantidad()" style="width: 75px;" required/></td>';                 nuevaFila+='<td><input type="text" placeholder="Precio" name="" id="p'+(trs)+'" autocomplete="off" disabled="true" style="width: 150px;" />Bs</td>';                 nuevaFila+='<td><input type="text" placeholder="Total duplicado" name="" id="t'+(trs)+'" autocomplete="off" disabled="true" style="width: 150px;" />Bs</td>';                 nuevaFila+="</tr>";                 $  ("#tabla").append(nuevaFila);                 $  ('input.typeahead').typeahead({                     name: 'typeahead',                     remote:'core/searchinv.php?key=%QUERY',                     limit : 10                 });                   //otro detallito               }); 

y en php recibe por ajax:

$  respuesta = new stdClass();  if ($  _POST) {  $  fecha = date('d/m/Y'); $  hora = date('H:i:s', time()); $  id_user     = $  _SESSION["iduser"];   $  order_id=sha1($  fecha.$  hora);   $  orderItemStatus = false;  for($  x = 0; $  x < count($  _POST['idProd']); $  x++) {        $  updateProductQuantitySql = "SELECT inventario.cantidad FROM inventario WHERE inventario.id = ".$  _POST['idProd'][$  x]."";     $  updateProductQuantityData = $  connect->query($  updateProductQuantitySql);     $  checkbox = isset($  _POST['descarta'][$  x]) ? $  _POST['descarta'][$  x] : "0";       while ($  updateProductQuantityResult = $  updateProductQuantityData->fetch_row()) {          if($  checkbox=="1"){         $  updateQuantity[$  x] = $  updateProductQuantityResult[0] - $  _POST['cantidad'][$  x];                                      // update inventario table             $  updateProductTable = "UPDATE inventario SET cantidad = '".$  updateQuantity[$  x]."' WHERE id = ".$  _POST['idProd'][$  x]."";             $  connect->query($  updateProductTable);              // add into order_item             $  orderItemSql = "INSERT INTO history_orders (order_id, cod_producto, cantidad, fecha, hora, vendedor_id)              VALUES ('$  order_id', '".$  _POST['cprodu'][$  x]."', '".$  _POST['cantidad'][$  x]."', '$  fecha', '$  hora','$  id_user')";              $  connect->query($  orderItemSql);                   if($  x == count($  _POST['idProd'])) {                 $  orderItemStatus = true;             }             }            } // while  } // /for quantity // while   $  respuesta->mensaje = '<div style="color:lime;" class="animated flash icon fa-check"> Listo, compra realizada con exito </div>';  $  connect->close();  }else{ $  respuesta->mensaje = '<div style="color:red;" class="animated flash icon fa-warning"> Error, Campos invalidos o vacios </div>'; } echo json_encode( $  respuesta ); 

detectar un checkbox de una linea vacia

Tengo el siguiente código desde un modal agrego pedidos a una tabla, la idea es detectar la primera linea vaciá y poder agregar datos a esta. Al ingresar datos a esta linea detectar el input hidden y también habilitar el checkbox de esta linea si la cantidad es inferior a 50.

$  ('#tbl_folio').on('click', 'button.replay', function(e) {      var cliente = $  (this).closest('tr').find('td:eq(0)').text();     var cantidad = $  (this).closest('tr').find('td:eq(1)').text();     var comentario = $  (this).closest('tr').find('td:eq(2)').text();           $  ("#pedido tbody > tr:has(td:eq(0):empty):first").find('td:eq(0)').text(cliente);      $  ("#pedido tbody > tr:has(td:eq(0):empty):first").find('td:eq(1)').text(cantidad);            $  (this).parent().find('input[name=comentario]').val(comentario);         if (cantidad > 50) {              $  (this).closest('td').find('input[name=Escoge]').attr('disabled', false);             $  (this).closest('td').find('.custom-control-label').text('URGENTE');         } else {              $  (this).closest('td').find('input[name=Escoge]').attr('disabled', true);         }            });
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalFolio">   Listado de pedidos </button>   <table id="pedido" class="table table-bordered text-center table-sm">       <thead>           <tr class="table-info">               <th width="5%">CLIENTE</th>               <th width="5%">Cantidad</th>               <th width="3%">&nbsp; </th>           </tr>       </thead>       <tbody>           <tr>               <td></td>               <td></td>               <td style="text-align: center; vertical-align: middle;">                   <div class="custom-control custom-checkbox custom-control-inline">                       <input type="checkbox" name="Escoge" class="custom-control-input" id="1" disabled>                       <input type="hidden" name="comentario">                       <label class="custom-control-label" for="1"></label>                   </div>               </td>           </tr>           <tr>               <td></td>               <td></td>               <td style="text-align: center; vertical-align: middle;">                   <div class="custom-control custom-checkbox custom-control-inline">                       <input type="checkbox" name="Escoge" class="custom-control-input" id="2" disabled>                       <input type="hidden" name="comentario">                       <label class="custom-control-label" for="2"></label>                   </div>               </td>           </tr>           <tr>               <td></td>               <td></td>               <td style="text-align: center; vertical-align: middle;">                   <div class="custom-control custom-checkbox custom-control-inline">                       <input type="checkbox" name="Escoge" class="custom-control-input" id="3" disabled>                       <input type="hidden" name="comentario">                       <label class="custom-control-label" for="3"></label>                   </div>               </td>           </tr>       </tbody>   </table>      <div class="modal fade" id="modalFolio" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"     aria-hidden="true">     <div class="modal-dialog modal-lg" role="document">       <div class="modal-content">         <!--Header-->         <div class="modal-header">                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">             <span aria-hidden="true">×</span>           </button>         </div>         <!--Body-->         <div class="modal-body">         <div class="table-responsive text-nowrap">           <table class="table table-bordered table-hover" id="tbl_folio">             <thead>               <tr>                 <th>Cliente</th>                 <th>Cantidad</th>                 <th>Comentario</th>                 <th></th>               </tr>             </thead>             <tbody id="tbody_folio">                 <tr>                 <td>CL 1</td>                 <td>10</td>                 <td>Pedido 1</td>                 <td>                 <button class='btn btn-sm btn-warning replay' type='button' name='button'>                 <i class='fas fa-chevron-circle-right'></i></button>                 </td>               </tr>                <tr>                 <td>CL 2</td>                 <td>100</td>                 <td>Pedido urgente</td>                 <td>                 <button class='btn btn-sm btn-warning replay' type='button' name='button'>                 <i class='fas fa-chevron-circle-right'></i></button>                 </td>               </tr>             </tbody>           </table>            </div>          </div>         <!--Footer-->         <div class="modal-footer">           <button type="button" class="btn btn-primary" data-dismiss="modal">Salir</button>         </div>       </div>     </div>   </div>

Mi problema es como detectar el input hidden de esa linea vaciá y poder habilitar el checkbox de esa linea

Remove item from array if checkbox false

With the code I have posted, I can add to array fine but how do I remove from array if checkbox is unticked. Any help would be greatfully appreciated. Many thanks

$ (function() {
info = [];

$ (document).on('click', '.rowChk', function () {

if($ (this).is(':checked')) {
$ ('#rowClk').show();

var currentRows = $ (this).closest("tr");
var rackid = currentRows.find("td:eq(0)").html();

data = {};

data.id = rackid;

info.push(data);
//console.log(data);…

Remove item from array if checkbox false

como usar ajax para ejecutar evento según estado de checkbox

Saludos a toda la comunidad,muy buenas dias. resulta que estoy haciendo una interfas para controlar un arduino por medio del puerto serial, todo va muy bien excepto que al pulsar el checkbox la página se recarga y eso hace que el checkbox pierda su estado de checked, estuve buscando por ahí como solucionar ese problema con Ajax para que la pagina no se recargue y se envíe solo el case isset($ _GET[‘submitOff/ON’]): al php…. ayudaa ya me rindo NO LO LOGRO 🙁

Poner un checkbox en checked si el valor es True en Angular 7

Buen dia

Requiero su ayuda ya que necesito que los checkbox de mi select multi opcion de Angular material que reciban el valor “true” de la base de datos, automaticamente se pongan con palomita o “checked”.

Como puedo lograr esto?

Codigo HTML

  <ng-container matColumnDef="foros">             <th mat-header-cell *matHeaderCellDef style="text-align: center;align-items: center">Foros</th>             <td mat-cell *matCellDef="let element">               <mat-form-field>               <mat-label>Foros</mat-label>               <mat-select [formControl]="toppings" multiple>               <mat-option *ngFor="let dato of element.optionsForos" [value]="dato.val">{{dato.label}}</mat-option>               </mat-select>               </mat-form-field></td>           </ng-container> 

Codigo TS

public transfromData(datos: Array<any>){      return datos.map(dato => {        dato["optionsForos"] = [         {           val: dato.autoevaluacion,           label: "Autoevaluacion"         },         {           val: dato.rt_funcionarios,           label: "RT_Funcionarios"         },         {           val: dato.reporteadores,           label: "Reporteadores"         },         {           val: dato.reporteadores_gerentes,           label: "Reporteadores_Gerentes"         },         {           val: dato.rt_gerentes,           label: "RT_Gerentes"         },         {           val: dato.contrato_funcionarios,           label: "Contratos_Funcionarios"         },         {           val: dato.rt_jefes,           label: "RT_Jefes"         },         {           val: dato.contrato_gerentes,           label: "Contrato_Gerentes"         },       ]   ;        console.log(dato)        return dato;      });    }    public async obtenerUsuarios(){     let data;     this.tablaUsuarios = await this.forosServicio.getUsuarios(data);     console.log(this.tablaUsuarios)     this.tablaUsuarios = this.transfromData(this.tablaUsuarios);     this.dataSource = new MatTableDataSource<any>(this.tablaUsuarios);     console.log(this.dataSource)    } 

Actualmente el select luce asi:

introducir la descripción de la imagen aquí

Pero que quisiera de que de recibir la combinacion [true,true,false,false,false,false,true,true], se viera automaticamente asi:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí