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

Share Improve this question Follow edited Jan 17, 2015 at 1:44 Zanon 30.9k2121 gold badges118118 silver badges126126 bronze badges asked Aug 18, 2014 at 4:57 Elham BagheriElham Bagheri 34522 gold badges77 silver badges2424 bronze badges 4

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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