I want to verify the checkboxes checked property. If any of them is not checked, display this sentence in span: "you should select one of them" and when I choose one of them, the message must disappear.

<form  method="get"action="#" onsubmit="return vali();">
    <span id="textspan" style="color:red"></span>
    <input type="checkbox" class='gender' id="male">male
    <input type="checkbox" class='gender' id="female">female
    <input type="submit" class="validate" value="send" />
</form>

function vali() {
    var bool = true;

    var checkedCount = $('input[class="gender"]:checked').length;
    if (checkedCount == 0) {
        $("#textspan").html('select one of them');
        bool = false;
    }
    if(checkedCount >= 1) 
    {
        $("#textspan").html('');
        bool = true;
    }

    return bool;    
}

I want to verify the checkboxes checked property. If any of them is not checked, display this sentence in span: "you should select one of them" and when I choose one of them, the message must disappear.

<form  method="get"action="#" onsubmit="return vali();">
    <span id="textspan" style="color:red"></span>
    <input type="checkbox" class='gender' id="male">male
    <input type="checkbox" class='gender' id="female">female
    <input type="submit" class="validate" value="send" />
</form>

function vali() {
    var bool = true;

    var checkedCount = $('input[class="gender"]:checked').length;
    if (checkedCount == 0) {
        $("#textspan").html('select one of them');
        bool = false;
    }
    if(checkedCount >= 1) 
    {
        $("#textspan").html('');
        bool = true;
    }

    return bool;    
}

• javascript
• jquery
• twitter-bootstrap

• 2 what is the problem? – Bhushan Kawadkar Commented Aug 18, 2014 at 4:58
• 1 like jsfiddle/arunpjohny/hxyaLwc7/1 ? – Arun P Johny Commented Aug 18, 2014 at 4:59
• use radio button in this case – Ehsan Sajjad Commented Aug 18, 2014 at 5:00
• Using checkboxes to select gender is mildly confusing at best and invites sexual ambiguity in the worst case. – Ja͢ck Commented Aug 18, 2014 at 5:26

2 Answers 2

You did not add any function to the change (or click) event of your checkboxes:

your function 'vali()' is attached to form submit It means your function will work only if you click on send button

So If you have your error, and you want to not have it when you click one of them(checkboxes), you have to add one function to that event:

function vali() {
    var bool = true;

    var checkedCount = $('input[class="gender"]:checked').length;
    if (checkedCount == 0) {
        $("#textspan").html('select one of them');
         bool = false;
    }
    if(checkedCount >= 1) 
    {
        $("#textspan").html('');
        bool = true;
    }
    return bool;
}

$(".gender").click(function(){
    var checkedCount = $('input[class="gender"]:checked').length;
    if(checkedCount >= 1){
                $("#textspan").html('');
            }
});

as your click event is triggered whenever you click one of your '.gender', its better to have your function as:

$(".gender").click(function(){
    $("#textspan").html('');
});

try below

<form  method="get"action="#" onsubmit="return vali();">
    <span id="textspan" style="color:red"></span>

    <input type="radio" name="rad" class='gender' id="male">male
    <input type="radio" name="rad" class='gender' id="female">female
    <input type="submit" class="validate" value="send" />
    </form>

<script>        

        $(document).ready(function(){
        $(".gender").click(function(){
        $("#textspan").html('');
    });
    });

         function vali() {
            var bool = true;

                var checkedCount = $('input[class="gender"]:checked').length;
                if (checkedCount == 0) {
                    $("#textspan").html('select one of them');
                    bool = false;
                }
                if(checkedCount >= 1) 
                {
                    $("#textspan").html('');
                    bool = true;

                }
                return bool;

        }
        </script>

fiddler like :- here