Question

如何在复选框验证后停止请求流程？如果复选框从未选中，我想停止请求。即使成功验证没有选中复选框，下面的脚本也不会停止该过程。

function addNewItem(id) {
var i, chks = document.getElementsByName('itemCheckbox');
for (i = 0; i < chks.length; i++){
    if (chks[i].checked){
        return true;
    }else{
        alert('No item selected');
        return false;
    }
}else{

if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("itemTable").innerHTML=xmlhttp.responseText;
        initPlayWidget();
    }
}

var itemCheckbox = document.forgetMeNotForm.itemCheckbox;
var selectedSong = "";

if (typeof itemCheckbox.length === 'undefined') {
    if (itemCheckbox.checked == true) {
        selectedSong = itemCheckbox.value + ",";
    }
} else {
    for (var i=0; i < itemCheckbox.length; i++) {
        if (itemCheckbox[i].checked) {
            selectedItm = selectedItm + itemCheckbox[i].value + ",";
        }
    }
} 

var type = document.getElementById("typeDropdown").value;
var monthValue = document.getElementById("monthDropdown").value;
var dayValue = document.getElementById("dayDropdown").value;
var startTime = document.getElementById("hrDropdown1").value + document.getElementById("minDropdown1").value;
var endTime = document.getElementById("hrDropdown2").value + document.getElementById("minDropdown2").value;
var itmId = document.getElementById("itmNumber").value;

xmlhttp.open("POST","/sites/" + domainName + "/themes/web/common/myLib.php" ,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("action=addItemRule&id="+id+"&selectedItm=" + selectedItm + "&type=" + type + "&monthValue=" + monthValue
    + "&dayValue=" + dayValue + "&startTime=" + startTime + "&endTime=" + endTime + "&itmId=" + itmId);

}
}

感谢。

Answer 1

您可以添加新功能

function isChecked(){
  var i, chks = document.getElementsByName('itemCheckbox');
  for (i = 0; i < chks.length; i++){
    if (chks[i].checked){
        return true;
    }else{
        alert('No item selected');
        return false;
    }
  }
}

并在主要功能上添加新行

function addNewItem(id) {
  if (!isChecked())
    return;
  ...

Answer 2

您的代码无法编译：

function addNewItem(id) {
var i, chks = document.getElementsByName('itemCheckbox');
for (i = 0; i < chks.length; i++){
    if (chks[i].checked){
        return true;
    }else{
        alert('No item selected');
        return false;
    }
}else{
^
|

尝试删除此卷曲支架

编辑：如果你不能有两个通用的elses，那么你需要稍微更改一下代码，也许把第二个else的内容放在if子句的内容中，如下所示：

function addNewItem(id) {
    var i, chks = document.getElementsByName('itemCheckbox');
    for ( i = 0; i < chks.length; i++) {
        if (chks[i].checked) {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("itemTable").innerHTML = xmlhttp.responseText;
                    initPlayWidget();
                }
            }
            var itemCheckbox = document.forgetMeNotForm.itemCheckbox;
            var selectedSong = "";

            if ( typeof itemCheckbox.length === 'undefined') {
                if (itemCheckbox.checked == true) {
                    selectedSong = itemCheckbox.value + ",";
                }
            } else {
                for (var i = 0; i < itemCheckbox.length; i++) {
                    if (itemCheckbox[i].checked) {
                        selectedItm = selectedItm + itemCheckbox[i].value + ",";
                    }
                }
            }

            var type = document.getElementById("typeDropdown").value;
            var monthValue = document.getElementById("monthDropdown").value;
            var dayValue = document.getElementById("dayDropdown").value;
            var startTime = document.getElementById("hrDropdown1").value + document.getElementById("minDropdown1").value;
            var endTime = document.getElementById("hrDropdown2").value + document.getElementById("minDropdown2").value;
            var itmId = document.getElementById("itmNumber").value;

            xmlhttp.open("POST", "/sites/" + domainName + "/themes/web/common/myLib.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("action=addItemRule&id=" + id + "&selectedItm=" + selectedItm + "&type=" + type + "&monthValue=" + monthValue + "&dayValue=" + dayValue + "&startTime=" + startTime + "&endTime=" + endTime + "&itmId=" + itmId);
        } else {
            alert('No item selected');
            return false;
        } 
    }
}

Edit2：此外，如果您想在发送请求之前检查所有复选框（并且只发送一次请求，您可以使用另一个变量：

function addNewItem(id) {
    var i, chks = document.getElementsByName('itemCheckbox'), valid = true;
    for ( i = 0; i < chks.length; i++) {
        if (!chks[i].checked) {
            valid = false;
        } 
    }

    if(valid) {
        // ...
        // do the request stuff here
        // ...
    } else {
        alert('No item selected');
        return false;
    } 
}

带有验证多个复选框的JavaScript

2 个答案: