jQuery checkbox control из HTML Ответ AJAX

Question

Я искал этот сайт уже несколько дней, но не смог найти точный ответ, который мне нужен. Я относительно новичок в этом, поэтому, пожалуйста, несите меня!

У меня есть HTML-страница, которая выполняет запрос AJAX на веб-сервер каждую секунду, ответ возвращает два значения для двух флажков. Сервер всегда поддерживает текущее состояние флажков.

Его основанный на примере онлайн и работает отлично.

Я включил сценарий jQuery, так что на веб-странице был удобный графический интерфейс, функции флажков отлично работают, однако я не могу установить флажки jQuery из кода HTML, который обрабатывает ответ AJAX.

Это код, который обрабатывает ответ AJAX:

var num_an = this.responseXML.getElementsByTagName('input').length; 
         for (count = 0; count < num_an; count++) { 
          document.getElementsByClassName("inputs")[count].innerHTML = 
           this.responseXML.getElementsByTagName('input')[count].childNodes[0].nodeValue; 
         } 

         // Heating Advance 
         if (this.responseXML.getElementsByTagName('OUTPUT')[0].childNodes[0].nodeValue ===           "checked") { 
          document.OUTPUT_form.OUTPUT1.checked = true; 
         } 
         else { 
          document.OUTPUT_form.OUTPUT1.checked = false; 
         } 

         // Hot Water Advance 
         if (this.responseXML.getElementsByTagName('OUTPUT')[1].childNodes[0].nodeValue ===           "checked") { 
          document.OUTPUT_form.OUTPUT2.checked = true; 
         } 
         else { 
          document.OUTPUT_form.OUTPUT2.checked = false; 
         } 

Я попытался включить обычные примеры, чтобы установить свойство флажком JQuery в «если» заявление, но ничего не похоже на работу.

т.е .:

if (this.responseXML.getElementsByTagName('OUTPUT')[0].childNodes[0].nodeValue ===           "checked") { 
          $("#checkbox-1").prop("checked", true); 

Могу ли я не использовать элементы JQuery в теле HTML? Я уверен, что это что-то неловко очевидно, что мне не хватает.

Вот код Флажок:

  <div data-role="controlgroup" data-type="horizontal" style="text-align: center;"> 

       <input type="checkbox" name= "OUTPUT1" id="checkbox-1" onclick="GetCheck()" /> 
       <label for="checkbox-1">Central Heating</label> 

       <input type="checkbox" name="OUTPUT2" id="checkbox-2" onclick="GetCheck()" /> 
       <label for="checkbox-2">Hot Water</label> 

      </div> 
     </form> 

Если я флажков стандарт HTML без JQuery стиля они работают отлично, это что-то делать с именем = и ID = атрибуты?

Любая помощь или указатель в правильном направлении были бы очень оценены!

спасибо.

Полный HTML-код здесь:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">  
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

    <script> 
    strOUTPUT1 = ""; 
    strOUTPUT2 = ""; 

    function GetArduinoIO() 
    { 
     nocache = "&nocache=" + Math.random() * 1000000; 
     var request = new XMLHttpRequest(); 
     request.onreadystatechange = function() 
     { 
      if (this.readyState == 4) { 
       if (this.status == 200) { 
        if (this.responseXML != null) { 

         // XML file received - contains analog values, switch values and LED states 
         var count; 

         // Get Input States (Heating and Hot Water Status) 
         var num_an = this.responseXML.getElementsByTagName('input').length; 
         for (count = 0; count < num_an; count++) { 
          document.getElementsByClassName("inputs")[count].innerHTML = 
           this.responseXML.getElementsByTagName('input')[count].childNodes[0].nodeValue; 
         } 

         // Heating Advance 
         if (this.responseXML.getElementsByTagName('OUTPUT')[0].childNodes[0].nodeValue ===           "checked") { 
          document.OUTPUT_form.OUTPUT1.checked = true; 
         } 
         else { 
          document.OUTPUT_form.OUTPUT1.checked = false; 
         } 

         // Hot Water Advance 
         if (this.responseXML.getElementsByTagName('OUTPUT')[1].childNodes[0].nodeValue ===           "checked") { 
          document.OUTPUT_form.OUTPUT2.checked = true; 
         } 
         else { 
          document.OUTPUT_form.OUTPUT2.checked = false; 
         } 
        } 
       } 
      } 
     } 
     // send HTTP GET request with LEDs to switch on/off if any 
     request.open("GET", "ajax_inputs" + strOUTPUT1 + strOUTPUT2 + nocache, true); 
     request.send(null); 
     setTimeout('GetArduinoIO()', 1000); 
     strOUTPUT1 = ""; 
     strOUTPUT2 = ""; 
    } 

    // service LEDs when checkbox checked/unchecked 

    function GetCheck() 
     { 
     if (OUTPUT_form.OUTPUT1.checked) { 
      strOUTPUT1 = "&OUTPUT1=1"; 
     } 
     else { 
      strOUTPUT1 = "&OUTPUT1=0"; 
     } 

     if (OUTPUT_form.OUTPUT2.checked) { 
      strOUTPUT2 = "&OUTPUT2=1"; 
     } 
     else { 
      strOUTPUT2 = "&OUTPUT2=0"; 
     } 
    } 

    </script> 

И тело страницы:

<body onload="GetArduinoIO()"> 
    <div data-role="page">   
    <div data-role="header" data-theme="c">    
    <h1>Drayton Remote</h1>  
    </div> 
    <br /> 

    <div data-role="content"> 

    <form id="check_OUTPUTS" name="OUTPUT_form"> 

      <div data-role="controlgroup" data-type="horizontal" style="text-align: center;"> 

       <input type="checkbox" name= "OUTPUT1" id="checkbox-1" onclick="GetCheck()" /> 
       <label for="checkbox-1">Central Heating</label> 

       <input type="checkbox" name="OUTPUT2" id="checkbox-2" onclick="GetCheck()" /> 
       <label for="checkbox-2">Hot Water</label> 

      </div> 
     </form> 
    </div> 
    </div> 
</body> 

Answer 1

В JQuery:

$('#checkbox-1').attr('checked','checked'); //check 
$('#checkbox-1').removeAttr('checked'); //uncheck 

или Javascript:

document.getElementById('checkbox-1').checked = true; //check 
document.getElementById('checkbox-1').checked = false; //uncheck