Marque la casilla de verificación no actualizada en la interfaz de usuario

Tengo un problema con la casilla de verificación de JS. Cuando marqué la casilla de verificación de JS, parece que está marcada en el programa, pero en la interfaz de usuario no está actualizada.Marque la casilla de verificación no actualizada en la interfaz de usuario

si alguien tiene una solución para este

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Check</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
    <script>  
    function getCheckedValue() 
    { 
    return ((document.getElementById("rock").checked)); 

    } 

    function setCheckedValue(toBeChecked){ 
     document.getElementById(toBeChecked).checked="checked"; 
     alert((document.getElementById(toBeChecked).checked)) 
     alert($('#'+toBeChecked).attr('checked')) 
    } 
    </script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
      <h1>What kind/s of music do you listen to?</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <input type="checkbox" class="music" name="music" id="rock" value="rock" > 
     <label for="rock">Rock</label> 
     <input type="button" value="Get" onclick="alert(getCheckedValue())"> 
     <input type="button" value="Set" onclick="setCheckedValue('rock') "> 
    </div> 
</div> 
</body> 
</html>

Fuente

2012-05-03 s_k_t

Si ha encontrado una respuesta aceptable a su pregunta, [por favor marque la respuesta como aceptada.] (Http://meta.stackexchange.com/a/5235/171858) –

He trabajado después de recibir respuesta de todos sus esfuerzos y el código de trabajo está a continuación.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Check</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
    <script>  
    function getCheckedValue() 
    { 
    return (document.getElementById("rock").checked); 
    //return $('input[name=music]').checked; 
    } 

    function setCheckedValue(checkboxName,toBeChecked){ 
     $('input[name='+checkboxName+']').prop("checked", true).checkboxradio("refresh"); 
    } 
    </script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
      <h1>What kind/s of music do you listen to?</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <input type="checkbox" class="music" name="music" id="rock" value="rock" > 
     <label for="rock">Rock</label> 
     <input type="button" value="Get" onclick="alert(getCheckedValue())"> 
     <input type="button" value="Set" onclick="setCheckedValue('music','rock') "> 
    </div> 
</div> 
</body> 
</html>

Fuente

2012-06-12 09:31:19

En lugar de utilizar attr lo haría muy aconsejable utilizar prop.

La forma cruzada navegador compatible preferido para determinar si se marca una casilla de verificación es para comprobar si hay un valor "Truthy" en la propiedad del elemento usando uno de los siguientes:

if (elem.checked) 
if ($(elem).prop("checked")) 
if ($(elem).is(":checked"))

El método .prop() se debe usar para desactivar y verificar en lugar del método .attr(). El método .val() se debe usar para obtener y establecer el valor.

$("input").prop("disabled", false); 
$("input").prop("checked", true); 
$("input").val("someValue");

Fuente

2012-05-03 04:43:27

tratar

function setCheckedValue(toBeChecked){ 
    document.getElementById(toBeChecked).checked=true; 
    alert((document.getElementById(toBeChecked).checked)) 
    alert($('#'+toBeChecked).prop('checked')) 
}

Fuente

2012-05-03 04:46:56

Jquery-Mobile añade clases para este tipo de cosas. Básicamente dentro de ese par una entrada/etiqueta que tiene lo siguiente:

<div class="ui-checkbox"> 
    <input type="checkbox" class="music" name="music" id="rock" value="rock"> 
    <label for="rock" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-checkbox-on ui-btn-up-c"> 

    <span class="ui-btn-inner ui-btn-corner-all"> 
     <span class="ui-btn-text">Rock</span> 
     <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span> 
    </span> 
    </label> 
</div>

Lo que hay que hacer es encontrar una manera de quitar y añadir las clases a las etiquetas y span etiquetas. He hecho esto para la etiqueta, pero no para el lapso ya que estoy a punto de dormir un poco.

function setCheckedValue(toBeChecked){ 
    document.getElementById(toBeChecked).checked="checked"; 
    $("label[for='rock']").addClass("ui-checkbox-off"); 
    $("label[for='rock']").addClass("ui-checkbox-on"); 
}

me tropiezo a través de:

$("#checkbox-label").checkboxradio("refresh");

Desde: http://forum.jquery.com/topic/what-is-the-most-effective-way-of-unchecking-a-checkbox

No del todo la misma pregunta, lo sé, pero poco relevante. No tuve la oportunidad de arreglármelas y ponerlo a funcionar ... ni miré mucho más para ver si funcionaba.

En resumen, la propiedad se establece en "marcada", sin embargo, los elementos deben tener su CSS actualizado para acomodar el nuevo 'estado'.

Espero que esto ayude!

Fuente

2012-05-03 05:10:26 Chase

Gracias cada uno por allí Soporte , ahora después de ver toda la respuesta que he alcanzado mi solución A continuación se muestra el código función setCheckedValue (toBeChecked) { \t \t //document.getElementById(toBeChecked).checked="checked "; \t \t $ ("input [name = music]"). Prop ("checked", true); \t \t $ ("label [for = 'rock']").addClass ("ui-checkbox-on"); \t \t $ ("span"). AddClass ("ui-icon-checkbox-on"); \t} –

Tengo alguna forma de dar el estilo en Span ... Como he dado el estilo span para la casilla de verificación, se necesita para todo el elemento del tramo –

Sumit, lo veré un poco más tarde cuando llegue a casa desde trabajo y le haré saber si encuentro algo. Anoche hice un lío por ahí tratando de hacerlo funcionar, pero no tuve éxito. – Chase

Marque la casilla de verificación no actualizada en la interfaz de usuario

Respuesta

Cuestiones relacionadas