JQueryPractice/demo6.html at main · EduKeyPath/JQueryPractice · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<title>Jquery Practice</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>

<select class="selO" multiple size="3">
	<option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
    <option value="Option 4">Option 4</option>
    <option value="Option 5">Option 5</option>
</select>
<br>

<button class="btn1">Click</button>
    <br>
<br>


<div class="inpt">
	<label><input type="checkbox" name="skill" value="Chaeckbox 1" /> Chaeckbox 1</label>
    <label><input type="checkbox" name="skill" value="Chaeckbox 2" /> Chaeckbox 2</label>
    <label><input type="checkbox" name="skill" value="Chaeckbox 3" /> Chaeckbox 3</label>
    <label><input type="checkbox" name="skill" value="Chaeckbox 4" /> Chaeckbox 4</label>
    <label><input type="checkbox" name="skill" value="Chaeckbox 5" /> Chaeckbox 5</label>
    <label><input type="checkbox" name="skill" value="Chaeckbox 6" /> Chaeckbox 6</label>
</div><br>

<button class="btn2">Click</button>

<br>
<br>

<select class="chng">
	<option value="">select</option>
	<option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="Other">Other</option>
</select>
<br>
<br>

<select class="chng2">
	<option value="">select</option>
	<option value="Web">Web</option>
    <option value="Graphics">Graphics</option>
    <option value="Multimedia">Multimedia</option>
</select>
<br>
<br>
<br>

<div class="radioC">
    <label><input type="radio" name="nameR" value="John" /> John</label>
    <label><input type="radio" name="nameR" value="Alan Doe" /> Alan Doe</label>
    <label><input type="radio" name="nameR" value="Bably" /> Bably</label>
</div>
<br>
<a href="demo11.html?Title=Software Developer">Apply Job</a>

<script>
	$(document).ready(function(){

		$('.radioC').change(function(){
			alert($('.radioC input[name="nameR"]:checked').val())
		})

		$('.btn1').click(function(){
			//var sele = new Array;
			$('.selO option:selected').each(function(i, sel){
				alert($(sel).val())
				//sele.push($(sel).val());
			})
			/*var chk = new Array;
			$('.inpt input[name="skill"]:checked').each(function(i, chk){
				chk.push($(chk).val());
			})*/

			var data = 'checkBoxvalu=' + chk + '&oprionValue=' + sele;
			alert(data);

		})

		$('.btn2').click(function(){
			let chk = new Array;
			//alert($('.inpt input[name="skill"]').val())
			if($('.inpt input[name="skill"]:checked').length < 1){
				alert('Pease select 1 checkbox');
			}
			$('.inpt input[name="skill"]:checked').each(function(i, chk){
				//alert($(chk).val())
				chk.push($(chk).val());
			})
		})

		$('.chng').change(function(){
			alert($('.chng option:selected').val())
		})

		$('.chng2').change(function(){
			alert($('.chng2 option').text())
		})


	})
</script>


<script>
function highlights(){
	$('ul[jq="highlights"]').slideToggle('slow');
}
$('#mobile').click(function(){
	$('div[use="menu"]').slideToggle('slow');
});
$('.welcome_msg').click(function(){
	$('p.msg[jq="special_msg"]').fadeToggle('slow');
});
function special_msg(){
	$('p.msg[jq="special_msg"]').toggle('slow')
}
</script>

</body>
</html>