how do i put the following in a for loop

Question

I would like to put the following in a for loop but i am having difficulties. Any help would be appreciated

 $("input:submit").click(function(){  
         if (!$("input[name=attendance1]").is(":checked")) {
            alert('Please select preference');
            return false;
            }
       else if (!$("input[name=attendance2]").is(":checked")) {
            alert('Please select preference');
            return false;
                }
        else if (!$("input[name=attendance3]").is(":checked")) {
            alert('Please select preference');
            return false;
        }

        });


});

I have tried:

for($i=1; $i<=3; $i++)
                 {
$("input:submit").click(function(){  
             if (!$("#food" + $i).is(":checked")) {
                alert('Please select preference');
                return false;
                }

            });         

    });

Answer 1

First fix:

alert('Please select preference);

with

alert('Please select preference');

Then if you want to loop:

for (var i = 0; i < 3; i++) {
    if (!$("input[name=attendance" + i + "]").is(":checked")) {
            alert('Please select preference');
            return false;
    }
}

---

Or better yet use jQuery's startsWith selector:

 if (!$('input[name^="attendance"]').is(":checked")) { alert('Please select preference'); return false; } 

Example

Answer 2

您在所有3个警报语句中都缺少一个结束单引号。

Answer 3

Here's my take on it. it has the advantage of you listing down in an array what names you want checked, regardless what names they are

//jQuery '.on()' for versions 1.7+
$("input:submit").on('click', function() {

    //assume valid unless found otherwise
    var valid = true;

    //add the input names you want to verify
    var nameList = [
        'attendance1',
        'attendance2',
        'attendance3'
    ];

    //loop through names
    for (var i = 0; i < nameList.length; i++) {
        var checked = $('input[name="'+nameList[i]+'"]').is(':checked');
        if (!checked) {
            alert('Please select a preference');

            //mark false when something wrong found
            valid = false;
        }
    }

    //check if validity persisted
    if(valid){
        //do something
    }

    //prevent default actions
    return false;
});​

Answer 4

I generally use a class name on my DOM elements when I want to do something like this. That makes it easier to iterate through the elements using .each(). I was not aware of the startsWith selector mentioned above, but it does look a bit cleaner than my method.

<!-- DO STUFF -->

    <input name="attendance1" class="my-unique-class-name" />
    <input name="attendance2" class="my-unique-class-name" />
    <input name="attendance3" class="my-unique-class-name" />

<!-- DO STUFF -->

<script type="text/javascript">
    $("input:submit").click(function(){
        var valid = true;
        $("input.my-unique-class-name").each(function (el) {
            if ( ! $(el).is(":checked") ) {
                valid = false;
            }
        });
        if ( ! valid ) {
            alert('Please select preference');
            return false;
        }
    });
</script>