Php For Developers: jQuery

Showing posts with label jQuery. Show all posts

Monday, 14 December 2015

Set Checkbox checked or unchecked using jQuery

Set Checkbox checked or unchecked using jQuery

                or

How to check checkbox is checked or unchecked using jQuery

Case 1    :    Single Checkbox using Id attribute

Html    :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>

    <p id="check">Click me<p>

    <input type ="checkbox" name="chk_1" checked id="chk_1" value="1" /><label for="chk_1">Checkbox 1</label>

</body>
</html>

Script    :

    $('#check').on('click',function(){
        $("#chk_1").prop('checked', false); // Unchecks it
    })

--------------------------------------------------------------   X ---------------------------------------------------------------

Case 2    :    Multiple Checkboxes Using Class attribute

Html    :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>

    <p id="check">Click me<p>

    <input type ="checkbox" name="chk_1" checked id="chk_1" value="1" class="mychechkbox"/><label for="chk_1">Checkbox 1</label>
    <input type ="checkbox" name="chk_2" checked id="chk_2" value="1" class="mychechkbox"/><label for="chk_2">Checkbox 2</label>
    <input type ="checkbox" name="chk_3" checked id="chk_3" value="1" class="mychechkbox"/><label for="chk_3">Checkbox 3</label>
    <input type ="checkbox" name="chk_4" checked id="chk_4" value="1" class="mychechkbox"/><label for="chk_4">Checkbox 4</label>

</body>
</html>

Script    :

    $('#check').on('click',function(){
        $(".mychechkbox").prop('checked', false); // Unchecks it
    })

--------------------------------------------------------------   X ---------------------------------------------------------------

Case 3    :    Single Checkbox Using name attribute

Html    :

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    </head>
    <body>

    <p id="check">Click me<p>

    <input type ="checkbox" name="chk_1" checked id="chk_1" value="1" /><label for="chk_1">Checkbox 1</label>

    </body>
    </html>

Script    :

    $('#check').on('click',function(){
        $("input[name='chk_1']:checkbox").prop('checked', false); // Unchecks it
    })

Thursday, 4 June 2015

How to Reload Page on Anchor or label click ??

How to Reload Page on click??

Html Code:

<div id="test">
    <p>this is test.</p>
    <p id="closeAuction">Reload Page<p>
</div>

Jquery Code:

$(document).ready(function() {
         $('#closeAuction').click(function() {
        location.reload();
     });
   });

For Live Demo Click Here Live Demo

Saturday, 21 March 2015

Get Image Name from url using jquery

How to get image name from url ?

First add the jquery file by including following following line

Jquery library:

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

Html:

    <img width="75px" height="75px" border="0" alt="Top Tech" src="http://unitedassemblers.com/Artwork/Blank.jpg">

Jquery:

$(document).ready(function(){
    var name = $('img').attr('src');
    var fileNameIndex = name.lastIndexOf("/") + 1;
    var filename = name.substr(fileNameIndex);
    if(filename='Blank.jpg')
    {
     alert('image name is '+filename);
    }
})

Live Demo :

Click here for live demo

Friday, 20 March 2015

How to add selected or active class to menu ??

If you want to add class selected or active to your menu just add the script in your project

Add jquery library using following url

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

Html:

<ul id="main-ul">
   <li><a href="#">About MHG</a></li>
    <li><a href="#">Workout Programs</a></li>
    <li><a href="#">Fitness Tips</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Read Our Blog</a></li>
</ul

CSS:

li{list-style:none;}
.selected{background:red;}
.selected a{color:#fff;}

Script:

$(document).ready(function(){
    $("#main-ul li").click(function(){
        $('li').removeClass("selected");
        $(this).addClass("selected");
    })
})

For live demo click Here

Friday, 20 February 2015

How to write a Simple jquery Code

How to write a Simple jquery Code ??

Html code:

<input type="text" id="testid" class="testclass" name="testname" placeholder="Event call using id on textbox click" >

<input type="text" id="testid2" class="testclass2" name="testname2" placeholder="Event call using class on textbox leave" >

first thing download the latest jquery library from

http://code.jquery.com/jquery-migrate-1.2.1.min.js

then save it with "jquery-migrate-1.2.1.min.js" in your js folder or your project location

Jquery Code:

$(document).ready(function(){    // jquery start
    $("#testid").click(function(){    // text box click event
        alert("You have clicked");    // message to be displayed
    })
});

This is the basic format for jquery beginner. you can use class instead of textbox id

$(document).ready(function(){    // jquery start
    $(".testclass2").blur(function(){    // text box blur event
        alert("This is use of class selector");    // message to be displayed
    })
});

$(document).ready(function(){    // jquery start

    $("input").blur(function(){    // text box blur event on particular textbox

    $(this).css("border", "1px solid red");

    });
});

Live Demo

Pages