Casella di controllo non aggiornata nell'interfaccia utente

Ho un problema relativo alla verifica della casella di controllo da parte di JS. Quando ho selezionato la casella di spunta da JS sembra che nel programma sia selezionata ma nell'interfaccia utente non viene aggiornata.Casella di controllo non aggiornata nell'interfaccia utente

se qualcuno ha una soluzione per questo

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

fonte

2012-05-03 s_k_t

Se hai trovato una risposta accettabile alla tua domanda, [si prega di indicare la risposta accettata.] (Http://meta.stackexchange.com/a/5235/171858) –

Ho lavorato dopo aver ricevuto risposta da tutti i vostri sforzi e il codice di lavoro è di seguito.

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

fonte

2012-06-12 09:31:19

Invece di usare attr vi consiglio vivamente di utilizzare prop.

Il modo multi-browser compatibile preferito per determinare se una casella è selezionata è per controllare un valore "truthy" sulla proprietà dell'elemento utilizzando uno dei seguenti:

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

Il metodo .prop() dovrebbe essere usato per impostare disabilitato e controllato invece del metodo .attr(). Il metodo .val() dovrebbe essere usato per ottenere e impostare il valore.

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

fonte

2012-05-03 04:43:27

provare

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

fonte

2012-05-03 04:46:56

Jquery-mobile aggiunge classi per queste cose. In pratica all'interno di quella coppia un ingresso/etichetta che si hanno le seguenti:

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

Quello che dovete fare è trovare un modo per rimuovere e aggiungere le classi per le etichette e span tag. L'ho fatto per l'etichetta, ma non per l'intervallo, visto che sto per dormire un po '.

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

ho inciampo in:

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

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

Non del tutto la stessa domanda, lo so, ma un po 'rilevante. Non ho avuto la possibilità di complicarlo con esso e farlo funzionare ... né ho cercato molto di più per vedere se funziona.

In breve, la proprietà viene impostata su "checked", tuttavia, gli elementi devono avere il loro css aggiornato per accogliere il nuovo 'stato'.

Spero che questo aiuti!

fonte

2012-05-03 05:10:26 Chase

Grazie ognuno per la non assistenza , Ora, dopo aver visto tutta la risposta che ho raggiunto la mia soluzione Di seguito è riportato il codice funzione setCheckedValue (toBeChecked) { \t \t //document.getElementById(toBeChecked).checked="checked "; \t \t $ ("input [nome = musica]"). Prop ("checked", true); \t \t $ ("label [for = 'rock']").addClass ("ui-casella-on"); \t \t $ ("span"). AddClass ("ui-icon-checkbox-on"); \t} –

C'è un modo per dare lo stile in Span ... Come ho dato lo span style per la casella di controllo, ci vuole per tutto l'elemento span –

Sumit, vedrò questo più avanti quando torno a casa da lavoro e ti faccio sapere se trovo qualcosa. La scorsa notte ho fatto un po 'di casino per cercare di farlo funzionare, ma non ho avuto successo. – Chase

Casella di controllo non aggiornata nell'interfaccia utente

risposta

Problemi correlati