Have a better way to hide and show divs with radio checked?

Question

I created this code a few days, but I believe it is possible to improve it, someone could help me create a smarter way?

// Hide registered or customized field if not checked.
function checkUserType(value) {
  if (value == 2) {
    $('#registered').hide();
    $('#customized').show();
  } else if (value == 1) {
    $('#registered').show();
    $('#customized').hide();
  }
}

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

$('#jform_place_type').on('click', function () {
  checkUserType($('input:radio[name="jform[place_type]"]:checked').val());
});

Demo: http://jsbin.com/emisat/3

Answer 1

// Hide registered or customized field if not checked.
function checkUserType(value) {

}

var t = function () {
  var value = $('input:radio[name="jform[place_type]"]:checked').val();
  if (value == 2) {
    $('#registered').hide();
    $('#customized').show();
  } else if (value == 1) {
    $('#registered').show();
    $('#customized').hide();
  }
};

$('#jform_place_type').on('click', t);

Answer 2

You can improve the Jquery (for the performance) by storing the DOM element and cache the rest. This is the maximum stuff you can reach I guess.

function checkUserType(value) {
  var r = $("#registered");
  var c = $("#customized");
  if (value == 2) {
    r.hide();
    c.show();
  } else if (value == 1) {
    r.show();
    c.hide();
  }
}

var func = function () {
  checkUserType($('input:radio[name="jform[place_type]"]:checked').val());
};

$('#jform_place_type').on('click', func);

For any further reading check this JQuery Performance

In particular read the third paragraph of the document

Cache jQuery Objects

Get in the habit of saving your jQuery objects to a variable (much like our examples above). For example, never (eeeehhhhver) do this:

$('#traffic_light input.on').bind('click', function(){...});
$('#traffic_light input.on').css('border', '3px dashed yellow');
$('#traffic_light input.on').css('background-color', 'orange');
$('#traffic_light input.on').fadeIn('slow');

Instead, first save the object to a local variable, and continue your operations:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

Tip: Since we want to remember that our local variable is a jQuery wrapped set, we are using $ as a prefix. Remember, never repeat a jQuery selection operation more than once in your application.

Answer 3

http://api.jquery.com/toggle/

    $('#jform_place_type').on('click', function () {
//show is true if the val() of your jquery selector equals 1
// false if it's not
      var show= ($('input:radio[name="jform[place_type]"]:checked')
        .val()==1);
//set both divs to visible invisible / show !show(=not show)
// (not show) means that if show=true then !show would be false
      $('#registered').toggle(show);
      $('#customized').toggle(!show);
    });

If you need a selector more than once then cache it I think it's called object caching as Claudio allready mentioned, thats why you see a lot of:

$this=$(this);
$myDivs=$("some selector");

The convention for a variable holding results of jquery function (jquery objects) is that they start with $ but as it is only a variable name you can call it anything you like, the following would work just as well:

me=$(this);
myDivs=$("some selector");