<input type="checkbox" id="nat_cover_letter">
<select id="check_uncheck">
<option value="0">Select</option>
<option value="1">Check</option>
<option value="2">Uncheck</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$('#check_uncheck').change(function(){
if(this.value==1)
{
$('#nat_cover_letter').attr('checked',true); // Check checkbox
}
else if(this.value==2)
{
$('#nat_cover_letter').attr('checked',false); // uncheck checkbox
}
else
{
alert('none');
}
});
</script> ...
Category: JQUERY
checkbox is checked or not in jquery
<input value="600.00" type="checkbox" name="cover_letter" id="nat_cover_letter">
<script>
$('#nat_cover_letter').change(function() {
if($(this).is(":checked")) {
alert('checked');
}
else
{
alert('unchecked');
}
});
</script>
Or you can check at run time as well like this :
<script>
if($("#nat_cover_letter").prop('checked') == true)
{
alert('checked');
}
else
{
alert('unchecked');
}
</script>
Get and Set HTML attributes in jquery
<input type="button" id="get_attribute" value="Get Attribute">
<input type="button" id="set_attribute" value="Set Attribute">
<input type="button" id="set_multiple_attribute" value="Set Multiple Attribute">
<a href="/" target="_blank">Coding 4 Developers </a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$('#get_attribute').click(function(){
var link = $('a').attr('href');
alert(link);
}); ...
Get and Set HTML Content - text(), html(), and val() in jquery
<input type="button" id="get_text" value="Get Text">
<input type="button" id="set_text" value="Set Text">
<input type="button" id="get_html" value="Get Html Content">
<input type="button" id="set_html" value="Set Html Content">
<input type="button" id="get_val" value="Get Textbox Value">
<input type="button" id="set_val" value="Set Textbox Value">
<p>Paragraph <b>text</b></p>
<input type="text" value="Hello jquery world" id="txt_box">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$('#get_text').click(function(){
var txt = $('p').text();
alert(txt);
}); ...
Object oriented programming in jquery/javascript
With the basics out of the way, we'll now focus on object-oriented JavaScript (OOJS) . This article presents a basic view of object-oriented programming with an example.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<input type="button" id="add" value="Add">
<input type="button" id="multipy" value="Multipy">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
var calculator = {
add : function(n1,n2)
{
alert(n1+n2);
},
multipy : function(n1,n2)
{
alert(n1*n2);
}
}
$('#add').click(function(){
calculator.add(2,3);
});
$('#multipy').click(function(){
calculator.multipy(2,3);
});
</script>
|
Events in Jquery
All user actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
- moving a mouse over an element
- selecting a radio button
- clicking on an element
Here I'm giving an example of events in Jquery.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<input type="button" value="click()" id="click">
<input type="button" value="dblclick()" id="dblclick">
<input type="button" value="mouseover()" id="mouseover">
<input type="button" value="mouseout()" id="mouseout">
<p>Hi Baby</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$("#click").click(function(){
alert('Click event');
});
$("#dblclick").dblclick(function(){
alert('dblclick event');
});
$("#mouseover").mouseover(function(){
alert('mouseover event');
});
$("#mouseout").mouseout(function(){
alert('mouseout event');
});
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
|
Check background or foreground status of web app
I'd like to check weather my web application is running in background or foreground, You can check it very easily in JavaScript. hasFocus() is the function which tells that your window is active or not.
Here in below example I have create checkForeGroundBackGround() function and inside the body of it we check the window status.
We call back checkForeGroundBackGround() function periodically to check the status.
|
1
2
3
4
5
6
7
8
|
<script>
function checkForeGroundBackGroundStatus()
{
var isActive = window.document.hasFocus();
document.write(isActive);
}
setInterval(checkForeGroundBackGroundStatus, 2000);
</script>
|
window.document.hasFocus() returns the web app status true if app is in foreground and false if app is in background. ...
Check internet connection on webpage
We can check the internet connection so that if there is no internet in between we can let user know that no internet connection.
Here in below example we call the checkInternetConnection() function periodically. So that we can detect the internet connection on web page.
|
1
2
3
4
5
6
7
|
<script>
function checkInternetConnection() {
var status = navigator.onLine;
document.write(status);
}
setInterval(checkInternetConnection, 2000);
</script>
|
Here we are checking internet connection by navigator.onLine. It returns true if there is internet connection and returns false if there is no internet connection.