来自 HTML AJAX 响应的 jQuery 复选框控件

我已经在这个网站上搜索了几天，但还没有找到我想要的确切答案。我对此比较陌生，所以请耐心等待！

我有一个每秒对 Web 服务器执行 AJAX 请求的 HTML 页面，响应为两个复选框返回两个值。服务器始终保持复选框的当前状态。

它基于在线示例，并且运行良好。

我已经合并了jQuery脚本，以便网页具有电话友好的GUI，复选框的功能完美运行，但是我无法从处理AJAX响应的HTML代码中设置jQuery复选框。

以下是处理 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;
                        } 

我试图在"if"语句中包含通常的示例来设置 jQuery 复选框的属性，但似乎没有任何效果。

即：

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

我可以不使用HTML正文中的jQuery元素吗？我敢肯定，这是我错过的令人尴尬的明显的东西。

这是复选框代码：

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

如果我在没有 jQuery 样式的情况下使复选框成为标准 HTML，它们可以完美地工作，这与 name= 和 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>