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

我已经搜索这个网站好几天了，但还没有找到我想要的确切答案。我对这个比较陌生，所以请容忍我

我有一个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;
                        } 

我不能在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>

strOUTPUT1=“”；
strOUTPUT2=“”；
函数GetArduinoIO（）
{
nocache=“&nocache=“+Math.random（）*1000000；
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（）
{
if（this.readyState==4）{
如果（this.status==200）{
if（this.responseXML！=null）{
//接收到XML文件-包含模拟值、开关值和LED状态
var计数；
//获取输入状态（加热和热水状态）
var num_an=this.responseXML.getElementsByTagName（'input'）.length；
对于（计数=0；计数

以及页面正文：

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

德雷顿遥控器


集中供热
热水

在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

---

我没有在jQuery中看到您的

GetCheck（）

函数。它会从你的帖子中触发第一个代码块吗？根据您的解释，看起来您只是希望根据XML结果选中或取消选中这些框，而不是希望在选中这些框时触发事件——这是否正确？感谢您的回复，我现在添加了HTML代码，是的，选中该复选框后，它将运行GetCheck（）函数，这将在arduino web服务器上设置输出，这将按预期工作，但是我无法让HTML代码实际影响AJAX响应中的jQuery复选框。

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