Strange jQuery formatting, can anyone explain?

Question

I've come across a plugin to toggle checkboxes (https://github.com/designmodo/Flat-UI/blob/master/js/flatui-checkbox.js).

However, it doesn't work properly with the latest version of jQuery so I'm having to debug it.

Can anyone explain the following?

if ($el.prop('disabled') == false) {
  $parent.toggleClass(ch) && checked ? $el.removeAttr(ch) : $el.attr(ch, true);
 $el.trigger(e).trigger('change'); 
}

Specifically, what is the deal with the &&? I know this is an AND operator, but I thought these only existed within if statements.

And also, what does the dollar in $el mean? It is set like this: $el = $(element). I understand why it's needed on the right but don't know what point it serves on the left.

Yes. Exactly [Ternary or Conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) — mplungjan, Jul 15 '13 at 13:15
Putting a dollar sign in the variable name, like: `var $el = $(element)` is just a way of letting the programmer know that element is a jquery object. — David Sherret, Jul 15 '13 at 13:20

intuitivepixel · Accepted Answer · 2013-07-15T15:07:42.010

Specifically, what is the deal with the &&? I know this is an AND operator, but I thought these only existed within if statements.

Yes it is a AND operand, and javascript is very elastic and forgivable in terms of using expressions.

And also, what does the dollar in $el mean? It is set like this: $el = $(element). I understand why it's needed on the right but don't know what point it serves on the left.

This is just to indicate that the element retrieved with jQuery is stored inside the $el variable, it's only a matter of naming style, but not needed.

Basically this line is using the ternary operator

$parent.toggleClass(ch) && checked ? $el.removeAttr(ch) : $el.attr(ch, true

but could be also written this way:

if($parent.toggleClass(ch) && checked){
   $el.removeAttr(ch);
} else {
   $el.attr(ch, true);
}

braican · Answer 2 · 2013-07-15T13:50:58.067

The && is written in a ternary operator. It is basically a shorthand if(...){} else {} statement. They are written as follows:

[if statement] ? [if true, return this] ? [else, return this]

Codecademy has a good tutorial on ternaries.

The $el is just the name of the variable for the $(element). The $ is not necessarily needed, and the variable could just as easily be named el. The leading $ is sometimes included in the variable name for jQuery objects since it mimics jQuery's syntax of the leading $.

Icarus · Answer 3 · 2013-07-15T13:57:34.697

The expression to the left of the ? operator is just a boolean expression. && can be used to construct any boolean expression as is the programmer doing here.

The puporse of $el = (element); is just to avoid doing $(element) all the time, which is not only longer to type, but it's calling document.getElementById() behind the scenes every time. The programmer is jut grabbing a reference to the object once. This is the same reason you would write:

var div = document.getElementById('somediv');

and continue using div down below...

epascarello · Answer 4 · 2013-07-15T13:26:22.417

1

There are plenty of explainations about the code, But the problem you are trying to solve is the fact attr() use changed after jQuery 1.6.

When you are setting the checked property of a checkbox, it should be using prop() instead of attr(). And you should not use removeProp() for checked, you need to use $el.prop(ch, false);

$parent.toggleClass(ch) && checked ? $el.prop(ch, false); : $el.prop(ch, true);

or it can be written as

$el.prop(ch, !($parent.toggleClass(ch) && checked) );

edited Jul 15 '13 at 13:26

answered Jul 15 '13 at 13:20

epascarello

204,599
20
195
236

Very interesting. Toggling using prop() makes no apparent changes to the markup (though visually the checks do behave correctly), whereas toggling using attr() actually adds `checked=true` (or false) to the markup. Is this expected? – Lars Jul 15 '13 at 13:58
Yes since you are not changing the attribute. – epascarello Jul 15 '13 at 16:46

score 1 · Answer 5 · answered Jul 15 '13 at 13:22

this is just a ternary operator... shorthand for if condition

 $parent.toggleClass(ch) && checked ? $el.removeAttr(ch) : $el.attr(ch, true);

this means

if($parent.toggleClass(ch) && checked){
    $el.removeAttr(ch);
} else {
   $el.attr(ch, true);
}

and about $el..

it is just a variable name . i suppose there is another variable created that says

var $el=$(element);

this cache the jquery object for better performance and doest n't need to call getElementById() everytime it is mentioned

score 1 · Answer 6 · answered Jul 15 '13 at 13:22

In this particular case && used to compile boolean var and run one of two statements, it's equals to:

if ($parent.toggleClass(ch) && checked)
   $el.removeAttr(ch);
else 
   $el.attr(ch, true);

Actually, I don't know language where && is allowed only within if operator, but in JS you have even more freedom: you can use it as check condition "Need I to continue or not":

callback && callback(args);

will run only when callback is defined;

Finally, $ char in var name is just a mention that this var is jQuery wrapped object. It's not necessary.

Strange jQuery formatting, can anyone explain?

6 Answers6