html select only one checkbox in a group

This snippet will:

  • Allow grouping like Radio buttons
  • Act like Radio
  • Allow unselecting all
// the selector will match all input controls of type :checkbox
// and attach a click event handler 
$("input:checkbox").on('click', function() {
  // in the handler, 'this' refers to the box clicked on
  var $box = $(this);
  if ($":checked")) {
    // the name of the box is retrieved using the .attr() method
    // as it is assumed and expected to be immutable
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    // the checked state of the group/box on the other hand will change
    // and the current value is retrieved using .prop() method
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);





     type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi
     type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit
     type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango




type=“checkbox” class=“radio” value=“1” name=“fooby[2][]” />Tiger type=“checkbox” class=“radio” value=“1” name=“fooby[2][]” />Sloth type=“checkbox” class=“radio” value=“1” name=“fooby[2][]” />Cheetah


$('input[type="checkbox"]').on('change', function() {
   $('input[type="checkbox"]').not(this).prop('checked', false);


$('input[type="checkbox"]').on('change', function() {
('input[name="' + + '"]').not(this).prop('checked', false);

Loading state button in Bootstrap 3

<button type=”button” data-loading-text=”Loading…” class=”btn btn-primary”>
Loading state

body {
padding: 10px;

$(“button”).click(function() {
var $btn = $(this);
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
setTimeout(function () {
}, 1000);

what’s the typeof(jQuery)

The typeof operator when applied to the jQuery object returns the string "function". Basically that does mean that jQuery is a function.

But the typing sort of stops there. Unlike statically typed languages, the number, order, modes, and types of parameters are not taken into account when computing the type of a a function. In JavaScript, it is just a “function.”

When you create a function in JavaScript, the function object you create is given two properties, length and prototype, and its prototype is set to Function.prototype so it has inherited properties like apply and call.

And as others have already answered, feel free to add your own properties. a function is just an object.

But be careful about “type.” Techncially there are only SIX types in JavaScript: Null, Undefined, Boolean, Number, String, and Object. So the real answer to your question, what is the exact type ofjQuery is …. actually … drumroll …. Object.

difference between document.ready and document.load in jquery

Jquery $(document).ready function event executes a bit earlier than window.onload() and called once the DOM(Document object model) is loaded on your page i.e.(anchor tag, table, div tag, paragraph tag etc..). It will not wait for the images, frames to get fully load. It means that it is the earliest stage in page load process.


The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn’t have to wait for all content to load.

How to get the jQuery MaskedInput unmask() function to work properly?

<input class="hideshowpwd cep" id="password-2" type="text" placeholder="Password" autocapitalize="off" autocomplete="off" spellcheck="true" style="margin: 0px; padding-right: 41px;">

$('.hideshowpwd').hidePassword('focus', {
toggle: { className: 'my-toggle' }
var mask = "000-00-0000";
var unmaskval = $("#password-2").unmask(mask);

Preventing session expiration with AJAX

var refreshTime = 600000; // every 10 minutes in milliseconds
window.setInterval( function() {
        cache: false,
        type: "GET",
        url: "refreshSession.php",
        success: function(data) {
}, refreshTime );

 $(document).ready( function() {
        var refreshTime = 600000; // in milliseconds, so 10 minutes
        window.setInterval( function() {
            var url = 'http://mysite.mydomain/refreshSessionURL';
            $.get( url );
        }, refreshTime );