2012-05-03 17 views
7

Mam problem z zaznaczeniem pola wyboru przez JS. Gdy zaznaczyłem pole wyboru przez JS, wygląda na to, że w programie jest ono zaznaczone, ale w interfejsie użytkownika nie jest aktualizowane.Zaznaczone pole wyboru nie zaktualizowane w interfejsie użytkownika

jeśli ktoś ma rozwiązanie tego

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

Jeśli znalazłeś akceptowalnej odpowiedzi na swoje pytanie, [proszę zaznaczyć odpowiedź jako zaakceptowany.] (Http://meta.stackexchange.com/a/5235/171858) –

Odpowiedz

1

Pracowałem po otrzymaniu odpowiedzi od wszystkich twoich wysiłków i działający kod jest poniżej.

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

Zamiast korzystania attr Gorąco polecam użyć prop.

Preferowanym sposobem cross-browser-kompatybilne, aby określić, czy jest zaznaczone pole wyboru jest sprawdzenie na „truthy” wartości na własność tego elementu przy użyciu jednej z następujących opcji:

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

Należy użyć metody .prop(), aby ustawić wyłączone i sprawdzone zamiast metody .attr(). Aby uzyskać i ustawić wartość, należy użyć metody .val().

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

spróbować

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

Jquery-mobile dopisuje zajęcia dla takich rzeczy. Zasadniczo w tym jedną parę wejść/etykiet są następujące:

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

Co trzeba zrobić, to znaleźć sposób, aby usunąć i dodać klas etykiecie i rozpiętości tagów. Zrobiłem to dla wytwórni, ale nie dla przęsła, ponieważ zamierzam wreszcie trochę przespać.

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

I nie natknąć:

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

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

Nie do końca to samo pytanie, wiem, ale nieznacznie istotne. Nie miałem szansy, by go dopracować i sprawić, żeby działał ... ani nie patrzyłem w to więcej, żeby sprawdzić, czy to działa.

W skrócie, właściwość jest ustawiana na "sprawdzone", jednak elementy muszą zostać odświeżone, aby uwzględnić nowy "stan".

Mam nadzieję, że to pomoże!

+0

Dzięki każdy Albowiem Wsparcia teraz po obejrzeniu wszystkich odpowiedzi doszedłem moje rozwiązanie Poniżej znajduje się kod funkcja setCheckedValue (toBeChecked) { \t \t //document.getElementById(toBeChecked).checked="checked "; \t $ ("input [nazwa = muzyka]"). Prop ("sprawdzony", prawda); \t \t $ ("label [for = 'rock']").addClass ("ui-checkbox-on"); \t $ ("zakres"). AddClass ("ikona-i-checkbox-on"); \t} –

+0

Ja w każdy sposób nadam stylu w Span ... Tak jak nadałem styl span dla checkboksa, potrzebny jest cały element span –

+0

Sumit, zajrzę do tego nieco później, kiedy wrócę do domu z pracuj i daj znać, jeśli coś znajdę. Wczoraj wieczorem bałaganiłem, próbując go uruchomić, ale się nie udało. – Chase

Powiązane problemy