jQuery check if checkbox is checked and update the value of the texbox with the checkbox's value and uncheck if it's empty

Question

Here what I am trying to do is, if I check the checkbox the value of the respective checkbox should be appended to the textbox by using "," as delimiter between the values. And If the value of the checked respective checkbox is empty it should alert that email ID is invalid and uncheck that checkbox whose value is empty.

What's Working :
- If I check the checkbox the value is appending to the textbox.
- If I check the checkbox whose value is empty I'm getting alert.
- If I uncheck the values are automatically removed from the textbox.

What's Not working:
- Email ID validation isn't working. Function is written but it's not working. (No Errors in console)
- If I have selected few options by checking the boxes which has value and then if I select the checkbox whose value is empty I am not getting the invalid email ID alert.

Here is the code below.

HTML:

   <label>Recipients : </label>
<input style="width:450px;" type="text" id="toaddress" name="toaddress"></input>
<br>

<div class="plist" style="padding:20px;">
    <input type="checkbox" value="abcp@gmail.com">Pradeep</input><br>
    <input type="checkbox" value="cd@gmail.com">Karthik</input><br>
    <input type="checkbox" value="abcn@p.com">akfkl</input><br>
    <input type="checkbox" value="ksake@po.com">afljs</input><br>
    <input type="checkbox" value="">abc</input><br>
    <input type="checkbox" value="">xyzop</input><br>
    <input type="checkbox" value="abc@cto.com">jay</input><br>
    <input type="checkbox" value="">raj</input><br>
</div>

JavaScript:

    function updateTextArea() {
    var allVals = [];
    $('.plist :checked').each(function (i) {

        if ($.trim($('.plist :checked').val()) === '' && validateEmail($('.plist :checked').val())) {
            $(this)
            alert("Email ID is invalid for the selected patient ! \n Example: abc@xyz.com");
        } else {
            allVals.push((i !== 0 ? "\r\n" : "") + $(this).val());
        }
        $('#toaddress').val(allVals).attr('rows', allVals.length);
    });


}
$(function () {
    $('.plist input').click(updateTextArea);
    updateTextArea();
});

function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if (!emailReg.test($email)) {
        return false;
    } else {
        return true;
    }
}

Link to JSFiddle is here http://jsfiddle.net/RhjjA/

Answer 1

if ($.trim($(this).val()) === '' && validateEmail($(this).val())) {
            $(this).attr('checked',false);
            alert("Email ID is invalid for the selected patient ! \n Example: abc@xyz.com");

Answer 2

Check http://jsfiddle.net/RhjjA/3/

1. I changed the validateEmail
2. Changed the checked when you loop through it to $(this).
3. I was thinking about checking if the value is empty or not valid, because neither of those conditions are allowed to pass the check. So added ! infron of the validateEmail.
4. I added an $(this).attr('checked', false);

This should help you get on your way.

Answer 3

Your code works fine except for one tiny detail, after your if condition, you have added $(this) . This isn't terminated with a semi-colon, nor is it required. Comment this line and try.

http://jsfiddle.net/RhjjA/5/

Answer 4

I did that from your first question : jsfiddle.net/hBGD6/4/

The 2 main problems were

• if ("string is empty" AND "validateEmail" ) couldn't work (so all string were ok). should be if ("string is empty" OR "NOT validateEmail" )
• the param used by validateEmail() was the return of a function which is null (or something undefined) which was invalid for emailReg.test()