Skip to main content

How to make checkbox behave like radio button in jQuery?

Make checkbox behave like radio button in jQuery:
Use below snippet to make checkbox to behave like a radio button. if you want to make a perfect radio button of checkbox then use example1 of below examples.

Example1-

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
  <label><input type="checkbox" name="cbx1" class="ans" /> Answer1</label>
  <label><input type="checkbox" name="cbx2" class="ans" /> Answer2</label>
  <label><input type="checkbox" name="cbx3" class="ans" /> Answer3</label>
  <label><input type="checkbox" name="cbx4" class="ans" /> Answer4</label>
  <script type="text/javascript">
  $(function () {
      $(".ans").click(function() { //you can also use change Function instead of click
        $(".ans").prop('checked', false);
        $(this).prop('checked', true);
      });
  });
  </script>
</body>
</html>

Output:


Example2-

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>
  <label><input type="checkbox" name="cbx1" class="ans" /> Answer1</label>
  <label><input type="checkbox" name="cbx2" class="ans" /> Answer2</label>
  <label><input type="checkbox" name="cbx3" class="ans" /> Answer3</label>
  <label><input type="checkbox" name="cbx4" class="ans" /> Answer4</label>
  <script type="text/javascript">
    $(function () {
      $(".ans").change(function () { //You can also use click method
        $(".ans").not(this).prop('checked', false);
      }); // You must need to use
    });
  </script>
</body>

</html>

Output:



Comments

Post a Comment

Popular posts from this blog

How to get list item entity type full name of a SharePoint list using REST API ?

REST API to get list item entity type full name: Bullet method (small and accurate): siteurl( AbsoluteUrl ) + /_api/Web/Lists/getbytitle('ListName')/ListItemEntityTypeFullName or   _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/getbytitle('SPList')/items?select=EntityTypeFullName **Use this above API just replacing absolute site URL and list name **Then put this prepared URL into browser and press enter button and obtain list entity type full name of related list. **You will get ListEntityTypeFullName like " SP.Data.EmployeeListItem " **Employee(may be a list name) How it is? Is it working or not you can tell us using comment section ?
4 comments
Read more

How to send email using SharePoint REST API in jQuery/JavaScript?

  Send email using SharePoint REST API in jQuery/JavaScript: We can able to send email to the SharePoint user using below REST API on SharePoint Online. We need to load SP.js file in code. we must need to give valid SharePoint user to send email. We can able to send email to valid SharePoint user of same organization.      var   restAPI  =  _spPageContextInfo . webAbsoluteUrl  +  "/_api/SP.Utilities.Utility.SendEmail" ;      $ . ajax ({          contentType:   'application/json' ,          url:   restAPI ,          type:   "POST" ,          data:   JSON . stringify ({              'properties' :  {             ...
Post a Comment
Read more