HTML AJAX响应中的jQuery复选框控件

Question

我已经在该网站上搜索了几天，但没有找到确切的答案。 我对此还比较陌生，所以请多多包涵！

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

它基于在线示例，效果很好。

我已经合并了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>

如果我使复选框标准HTML而不使用jQuery样式，那么它们可以完美地工作，这与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>

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