Question

我最近正在学习phonegap。我在下面有这个代码。我的目的是从mysql获取用户记录，然后输出一些用户可以更新的复选框，然后直接写入mysql。

这个过程工作正常，只是有趣的是复选框的值，即使我取消检查它，它仍然保持为1而不是0

请问我出错的地方？仅供参考，我也是javascript的新手，所以很可能只是js错误导致了这一点。

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Ajax Sample</title>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript">
        function appReady(){
        var myId = sessionStorage.getItem('myId');

        var ajax = new XMLHttpRequest();
            ajax.open("GET","domain/system_setup.php?user_id="+myId+"",true);
            ajax.send();

        ajax.onreadystatechange=function(){
                if(ajax.readyState==4 && (ajax.status==200||ajax.status==0)){
                    eval('var data = ' + ajax.responseText + ';');
                    var theResults = data.dataset;
                    var theHtml = '';
                    for(var i=0;i<theResults.length;i++){
                    if (theResults[i].system_1 == 1) {
                        var theHtml = theHtml + '<input name="system_1" type="checkbox" id="system_1" value="1" checked="checked" />MS Excel';
                    } else {
                        var theHtml = theHtml + '<input name="system_1" type="checkbox" id="system_1" value="0" />MS Excel';
                    }   
                    if (theResults[i].system_2 == 1) {
                        var theHtml = theHtml + '<BR><input name="system_2" type="checkbox" id="system_2" value="1" checked="checked" />MYOB';
                    } else {
                        var theHtml = theHtml + '<BR><input name="system_2" type="checkbox" id="system_2" value="0" />MYOB';
                    }   
                    if (theResults[i].system_3 == 1) {
                        var theHtml = theHtml + '<BR><input name="system_3" type="checkbox" id="system_3" value="1" checked="checked" />Quickbooks';
                    } else {
                        var theHtml = theHtml + '<BR><input name="system_3" type="checkbox" id="system_3" value="0" />Quickbooks';
                    }
                    if (theResults[i].system_4 == 1) {
                        var theHtml = theHtml + '<BR><input name="system_4" type="checkbox" id="system_4" value="1" checked="checked" />Xero';
                    } else {
                        var theHtml = theHtml + '<BR><input name="system_4" type="checkbox" id="system_4" value="0" />Xero';
                    }                           
                    if (theResults[i].system_5 == 1) {
                        var theHtml = theHtml + '<BR><input name="system_5" type="checkbox" id="system_5" value="1" checked="checked" />SAP';
                    } else {
                        var theHtml = theHtml + '<BR><input name="system_5" type="checkbox" id="system_5" value="0" />SAP';
                    }   
                    if (theResults[i].system_6 == 1) {
                        var theHtml = theHtml + '<BR><input name="system_6" type="checkbox" id="system_6" value="1" checked="checked" />Navision';
                    } else {
                        var theHtml = theHtml + '<BR><input name="system_6" type="checkbox" id="system_6" value="0" />Navision';
                    }   
                    if (theResults[i].system_7 == 1) {
                        var theHtml = theHtml + '<BR><input name="system_7" type="checkbox" id="system_7" value="1" checked="checked" />Others';
                    } else {
                        var theHtml = theHtml + '<BR><input name="system_7" type="checkbox" id="system_7" value="0" />Others';
                    }                                                                               

                    }
                }   
        document.getElementById('main').innerHTML = theHtml;
        }
    }

    function updateSystem (form) {
        var system_1 = form.system_1.value;
        var system_2 = form.system_2.value;
        var system_3 = form.system_3.value;
        var system_4 = form.system_4.value;
        var system_5 = form.system_5.value;
        var system_6 = form.system_6.value;
        var system_7 = form.system_7.value;

        var ajax = new XMLHttpRequest();
            ajax.open("GET","domain/system_setup_update.php?user_id="+sessionStorage.getItem('myId')+"&system_1="+system_1+"&system_2="+system_2+"&system_3="+system_3+"&system_4="+system_4+"&system_5="+system_5+"&system_6="+system_6+"&system_7="+system_7+"",true);
            ajax.send();            

            ajax.onreadystatechange=function(){
                if(ajax.readyState==4 && (ajax.status==200||ajax.status==0)){
                    eval('var data = ' + ajax.responseText + ';');
                    var theResults = data.dataset;
                    for(var i=0;i<theResults.length;i++){   
                        var theRefresh = window.location = "system_setup.html";
                    }   
                    document.getElementById('refresh').innerHTML = theRefresh;          
                    }
                }
        }
        document.addEventListener("deviceready", appReady, false);

    </script>

    <style type="text/css">
        .line {padding-bottom:2px;}
        .title {float: left; width: 80px;}
        .content {margin-left: 90px; }
        .clear{clear:both;}
    </style>
</head>
<body>
<h1>System Used</h1>

<FORM NAME="myform" ACTION="" METHOD="GET">
    <div id="main">
    </div>
<INPUT TYPE="button" NAME="button" Value="Update" onClick="updateSystem(this.form)">
</FORM>
    <div id="refresh">
    </div>  
</body>
</html>

先谢谢!!

Answer 1

你必须再次检查checked布尔属性而不是项目的value。在您的用例中，value没有任何实际意义，因为它将保留您创建标记时所提供的任何内容，并且无论您单击复选框多少次都不会更改。

Answer 2

我不确定你真正想要的是什么：

每个项目一个复选框
每个项目有多个复选框，因此可以同时勾选0和1
一个单选按钮组，每个项目选择0或1

第一个解决方案的代码如下所示：

<input type="checkbox" name="itemname" />

var result = form.itemname.checked ? "1" : "0";

第三个解决方案的代码如下：

<input type="radio" name="itemname" value="1" /> Yes
<input type="radio" name="itemname" value="0" /> No

var buttons = form.itemname; // Array!
var result = false;
for (var i=0; i<buttons.length; i++)
    if (buttons[i].checked)
        result = buttons[i].value;

您上面发布的代码是解决方案二，它就像我的第二个示例：forms.itemname是一个数组，但可能会检查多个选项。

Answer 3

gonchuki是正确的，你需要像

这样的东西

var radio = document.getElementById('YOUR_RADIO_ID')

if (radio.checked)
{
    // do something here
}

或者在jQuery中

$('#system_1 option:checked')

将为system_1选择选中的任何选项。

但我很确定你是否改变

var system_1 = form.system_1.value;
var system_2 = form.system_2.value;
var system_3 = form.system_3.value;
var system_4 = form.system_4.value;
var system_5 = form.system_5.value;
var system_6 = form.system_6.value;
var system_7 = form.system_7.value;

要

var system_1 = form.system_1.checked;
var system_2 = form.system_2.checked;
var system_3 = form.system_3.checked;
var system_4 = form.system_4.checked;
var system_5 = form.system_5.checked;
var system_6 = form.system_6.checked;
var system_7 = form.system_7.checked;

你的脚本应该选择合适的无线电。

如果有帮助，请告诉我。

javascript：取消选中时，复选框值保持为1而不是0

3 个答案: