带有“验证多个”复选框的javascript

Question

how can I stop the request process after the checkbox validatation? I want to stop the request if the checkboxes has never selected. The below script will not stop the process even it success validate no checkbox is select.

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

}
}

thanks.

Answer 1

You can add new function

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

and add new line on main function

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

Answer 2

Your code does not compile:

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

Try to delete this Curly bracket

Edit: Also you cannot have two generic elses to one if, so you need to change the code a little, maybe put the content of the second else in the content of the if clause, like this:

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: Also if you want to check all checkboxes before sending the request(and send request only once, you can use another variable:

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