| Get Value | JQuery code | Html code | Result |
|---|---|---|---|
| Textbox | function getvalbtn() {alert($(“#txtName”).val());} |
<input type="text" id="txtName" /> <button type="button" onclick="getvalbtn()">Getvalue</button> |
|
| span/div | function gettxtbtn() { alert($(“#txtbx”).text()); }; |
<span id="txtbx">CRMHIKE<span> <button type="button" onclick="gettxtbtn()">Getvalue</button> |
CRMHIKE |
| radio button |
function getradbtn() { var a = $(“[name=gender]:checked”).val(); alert(a);} |
<input type="radio" name="gender" value="Male"/>Male <input type="radio" name="gender" value="Female"/>Female <button type="button" onclick="getradbtn()">GetValue</button> |
Male Female |
| checkbox button |
function getchkboxbtn() { var arr = []; if ($(“input[name=’subject’]:checked”).length === 0) { alert(“Please select a subject”); return; } $.each($(“input[name=’subject’]:checked”), function () { arr.push($(this).val()); }); alert(arr.join(“,”));}; |
<input type="checkbox"name="subject"value="Math"/>Math <input type="checkbox"name="subject"value="Hindi"/>Hindi <input type="checkbox"name="subject"value="English"/>English <button type="button" onclick="getchkboxbtn()">Get Value</button> |
Math Hindi English |
| Set Value | |||
| Textbox | function setbtn() { $(‘#txtname’).val(“Vikas”);}; |
<input type="text" id="txtname" /> <button type="button" onclick="setbtn()">Set Value</button> |
Vikas |
| span/div | function setbxbtn() { $(‘#txtvalue’).text(“CRMHIKE”); }; |
<span id="txtvalue">CRMHIKE<span> <button type="button" id="setvalue">Set Value</button> |
CRMHIKE |
| radio button |
function setradbtn() { $(“input[name=’gender’][value=’Male’]”).prop(“checked”, true); $(“#txtradio”).text(“Male”);} |
<input type="radio" name="gender" value="Male"/>Male <input type="radio" name="gender" value="Female"/>Female <span id="txtradio"></span> |
Male Female |
| checkbox button |
function setChkval() { $(“input[name=’sub’][value=’Science’]”).prop(“checked”, true); $(“input[name=’sub’][value=’Computer’]”).prop(“checked”, true); $(“#chkbox”).text(“Science, Computer “); } |
<input type="checkbox" name="sub" value="Science" /> Science <input type="checkbox" name="sub" value="Computer" /> Computer <input type="checkbox" name="sub" value="English" /> English <button type="button" onclick="setChkval()">Set Value</button> <span id="chkbox"></span> |
Science Computer English |
| HTML | JQUERY | OUTPUT |
|---|---|---|
| “Write JQuery functions to perform addition, two input numbers provided by the user. Display the results with appropriate headings in an HTML element with the id ‘Result’.” | ||
<div style="border:1px solid black">
<dl>
<dt>Enter the first number:</dt>
<dd><input type="text" id="num1"/></dd>
<dt>Enter the second number:</dt>
<dd><input type="text" id="num2"/></dd>
<dd>
<input type="button" onclick="add()" value="ADD"/>
</dd>
<dd id="Result"></dd>
</dl>
</div>
|
<script>
function add() {
var a = Number($("#num1").val());
var b = Number($("#num2").val());
var c = a + b;
$("#Result").html("<h1>Addition Result is " + c + "</h1>");}
}
</script>
|
Welcome to CRMHIKE:
|
| “Write a JQuery function to retrieve the value entered in the text input field when the button is clicked. Display the value in a paragraph element with the id ‘res’.” | ||
<div style="border:1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<input type="text" id="txt" />
<button type="button" onclick="getvalues()">Getvalue</button>
<h2>Result:</h2>
<p id="res"></p>
</div>
|
<script>
function getvalues() {
var a = $("#txt").val();
$("#res").html(a);
}
</script>
|
Welcome to CRMHIKE: Result:
|
| “Create a JQuery function to retrieve the selected value from radio buttons when the button is clicked. Display the selected value in a paragraph element with the id ‘output’.” | ||
<div style="border:1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<input type="radio" name="gender" value="Male" />Male:
<input type="radio" name="gender" value="Female" />Female:
<button type="button" onclick="getrdbtn()">Click!</button>
<h1>Result</h1>
<p id="output"></p>
</div>
|
<script>
function getrdbtn() {
var a = $("[name=gender]:checked").val();
$("#output").html(a); }
</script>
|
Welcome to CRMHIKE: Male: Result:
|
| “Write a JQuery function that retrieves the value entered in the first text input field and sets it as the value of the second text input field when the button is clicked.” | ||
<div style="border:1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<input type="text" id="get" />
<button type="button" onclick="getsetvalue()">GetSetvalue</button>
<input type="text" id="set" />
</div>
|
<script>
function getsetvalue() {
var a = $("#get").val();
$("#set").val(a);}
</script>
|
Welcome to CRMHIKE:
|
| “Create a JQuery function that toggles the visibility of the div element with the id ‘divhd’ when the button is clicked.” | ||
<div style="border:1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<div id="divhd">This is CRMHIKE Tutorial.</div>
<button type="button" onclick="hideandshow()">Click!</button>
</div>
|
<script>
function hideandshow() {
$("#divhd").toggle();};
</script>
|
Welcome to CRMHIKE:This is CRMHIKE Tutorial.
|
| “Implement a JQuery function to hide or show the element with the id ‘HideElement’ based on the state of the checkbox, when it’s clicked.” | ||
<div style="border: 1px solid black">
<h2>Welcome to CRMHIKE:</h2>
<label><input type="checkbox"
onclick="HideandShowElement()"/>Hide Element:</label>
<div id="HideElement" style="border: 1px solid black; padding: 10px;">
This is the element you want to hide/show.
</div>
|
<script>
function HideandShowElement() {
$('#HideElement').toggle();};
</script>
|
Welcome to CRMHIKE:
This is the element you want to hide/show.
|
| “Create a JQuery function to update the content of the paragraph element with the id ‘Onchoose’ to reflect the selected value from the dropdown menu with the id ‘choose’ when the ‘Choose’ button is clicked.” | ||
<div style="border:1px solid black">
<h2>Welcome To CRMHIKE</h2>
<select id="choose">
<option value="Html">HTML</option>
<option value="CSS">CSS</option>
<option value="JAVASCRIPT">JAVASCRIPT</option>
<option value="PHP">PHP</option>
<option value="BOOTSTRAP">BOOTSTRAP</option>
</select>
<button type="button" onclick="text1()">Choose</button>
<p id="Onchoose"></p>
</div>
|
<script>
function text1() {
var a = $("#choose").val();
$("#Onchoose").text(a);}
</script>
|
Welcome To CRMHIKE
|
Last Update: July 17, 2026
Total 0 Votes:
0
0