JAVA BY RAMAKRISHNA: JQuery Radio Button

Tuesday, 30 July 2013

JQuery Radio Button

//To uncheck by default checked radio button

$("input:radio[name='radioButtonName']").attr("checked",false);

//To check particular radio button with starting index 0 or 1 or 2

$("input:radio[name='radioButtonName']")[0].checked = true;

//To get the value of selected radio button

$("input:radio[name='radioButtonName']:checked").val();

//To get the text(display text in radio button label) of selected radio button

$("input:radio[name='radioButtonName']:checked").parent().text();

//To get the index of selected radio buttons

var temp = $("input:radio[name='radioButtonName']");

var selectedIndex = temp.index(temp.filter(":checked"));

EXAMPLE PROGRAM

<html>
<head>
<style>

.addSelColor {
color: red;
}

.MyCssClass {
background-color: green;
cursor: pointer;
border: 2px solid yellow;
}

</style>

<script src="jquery.js"></script>
<script>
$(document).ready(function() {

  alert("Jquery is Loaded");

$("input:radio[name=sex]").change(function() {
  alert($(this).val());
  $(".radioClass").parent().removeClass("addSelColor"); //for css
  $(".radioClass:checked").parent().addClass("addSelColor"); //for css
});

$("#ClearButton").click(function() {
  $("input:radio[name=sex]").attr("checked",false);
});

$("#selectMale").click(function() {
  $("input:radio[name=sex]")[0].checked = true;
  $(".radioClass").parent().removeClass('addSelColor'); //for css
  $(".radioClass:checked").parent().addClass('addSelColor'); //for css
});

$("#selectFemale").click(function() {
  $("input:radio[name=sex]")[1].checked = true;

  $(".radioClass").parent().removeClass("addSelColor"); //for css
  $(".radioClass:checked").parent().addClass("addSelColor"); //for css
});

$("#hideButton").click(function() {
  $("#radioDiv").hide();
});

$("#showButton").click(function() {
  $("#radioDiv").show();
});

$("#getVal").click(function() {
  var temp=$("input:radio[name=sex]:checked").val();
  alert(temp);
});

$("#getText").click(function() {
  var temp=$("input:radio[name=sex]:checked").parent().text();
  alert(temp);
});

$("#getIndex").click(function() {
  var temp = $("input:radio[name=sex]");
  var selectedIndex = temp.index(temp.filter(":checked"));
  alert(selectedIndex);
});

$("#acss").click(function() {
  $("label[for=male]").addClass("MyCssClass");
  $("label[for=female]").addClass("MyCssClass");
});

$("#rcss").click(function() {
  $("label[for=male]").removeClass("MyCssClass");
  $("label[for=female]").removeClass("MyCssClass");
});

});
</script>
</head>
<body>
<div id="radioDiv">

<label for="male">
<input type="radio" class="radioClass" name="sex" value="BOY" checked>MALE<input>
</label>
<label for="female">
<input type="radio" class="radioClass" name="sex" value="GIRL">FEMALE</input>
</label>

</div></br>

  <button id="ClearButton">Reset</button></br>
  <button id="selectMale">Male</button></br>
  <button id="selectFemale">FeMale</button> </br>
  <button id="hideButton">Hide Radio Buttons</button></br>
  <button id="showButton">Show Radio Buttons</button></br>
  <button id="getVal">Get Selected Value</button></br>
  <button id="getText">Get Selected Text</button></br>
  <button id="getIndex">Get Selected Index</button></br>
  <button id="acss">ApplyCss</button></br>
  <button id="rcss">RemoveCss</button></br>

</body>
</html>