Sunday 22 February 2015

Custom checkbox using jquery

    Hello Reader !

    Here is an example how to make a custom check box using simple script and css.

    Script

        $(document).ready(function(){
        $('label').click(function(){
        $(this).toggleClass('checkedN');
        });
        });

    css

        .checkedN {background-position:0 53px}
        input[type=checkbox]{opacity: 0;height: 53px;width: 53px}
        label{height: 53px;width: 53px;background: url(check.png);display: block;}

    Html

        <label for="">
        <input type="checkbox" name="" value="" class="checkedBtn">
        </label>

    You can use check box image according to your need

    and add this before this scripiting :-

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

For such more blogs kindly visit http://findnerd.com/NerdDigest

No comments:

Post a Comment