writing if/else statement as ternary operator

Question

How would I write this using a ternary operator?

if (!$('#privacy_check').is(':checked')) {
  $('#privacy_check').css('outline-color', 'red');
  $('#privacy_check').css('outline-style', 'solid');
  $('#privacy_check').css('outline-width', 'thin');
} else {
  $('#privacy_check').css('outline-color', 'none');
  $('#privacy_check').css('outline-style', 'none');
  $('#privacy_check').css('outline-width', '0');
}

I have tried

!$('#privacy_check').is(':checked') ? $('#privacy_check').css('outline-color', 'red'); $('#privacy_check').css('outline-style', 'solid');$('#privacy_check').css('outline-width', 'thin') :
$('#privacy_check').css('outline-color', 'none');$('#privacy_check').css('outline-style', 'none');$('#privacy_check').css('outline-width', '0');

ternary operator, evaluates to a value. Do you want this to evaluate to some value? — thefourtheye, May 26 '16 at 09:52
Don't. It will simply make it more difficult to read to no advantage — Liam, May 26 '16 at 09:53
ok, so maybe best to leave as a normal `if/else statement`. thanks! — , May 26 '16 at 09:54
*"Any fool can write code that a computer can understand. Good programmers write code that humans can understand"* http://stackoverflow.com/questions/522828/is-code-for-computers-or-for-people — Liam, May 26 '16 at 09:54
fair point @Liam. having said that vaclavs answer below refactors my code from 9 lines to 4... that is good too right? — , May 26 '16 at 09:56
But why? What is loosing those 5 lines saving you? Is it more efficient, no (not in processing time). Is it easier to read, no. Does it effect the processing of the code at all, no. So why change it? If you want to reduce your download times (FYI) you should look into using minification, something like [YUI](http://yui.github.io/yuicompressor/) — Liam, May 26 '16 at 10:01
@Liam I do agree with everything you said above, but at the same time there is an attitude out that less lines of code required to complete a task is better. Perhaps I have been taught incorrectly but I always believe lots of `if/else` statements is bad if there is a more clever way of doing things. Perhaps this example isn't perfect, but i do believe that attitude exists out there — , May 26 '16 at 10:06
If there is code review, please let us know how this ternary operator is appreciated. — thefourtheye, May 26 '16 at 10:09
@thefourtheye will do! do you also believe that it should be avoided? — , May 26 '16 at 10:11
I would say, your current code looks okay. Its more readable. There is no obvious advantage by using ternary operator in this case. — thefourtheye, May 26 '16 at 10:14
@thefourtheye ok, I appreciate what you are saying, but in that case could you advise when there would be an obvious advantage in using a ternary operator? — , May 26 '16 at 10:15

Niet the Dark Absol · Answer 1 · 2016-05-26T09:53:49.873

4

Simplify.

CSS:

#privacy_check {
    outline: thin solid red;
}
#privacy_check:checked {
    outline: none;
}

No JavaScript required.

edited May 26 '16 at 09:53

answered May 26 '16 at 09:52

Niet the Dark Absol

320,036
81
464
592

Ok but he was asking for a javascript-based solution O.o – Ema.jar May 26 '16 at 09:53
sorry, you must have misunderstood the question. I only want to show the red if it is not checked – May 26 '16 at 09:53
@NiettheDarkAbsol i have prob not provided enough info in the question to be fair. I only want to show the red after an attempt is made to submit the form – May 26 '16 at 09:55
Sounds like you want `` coupled with `#privacy_check:invalid {outline: thin solid red;}` – Niet the Dark Absol May 26 '16 at 10:08

score 0 · Accepted Answer · answered May 26 '16 at 09:55

0

var $elem = $('#privacy_check');
$elem.css($elem.is(':checked') ?
    { outlineColor: 'none', outlineStyle: 'none', outlineWidth: 0 } :
    { outlineColor: 'red', outlineStyle: 'solid', outlineWidth: 'thin' })

answered May 26 '16 at 09:55

Rudolf Gröhling

4,611
4
27
37

Pranav C Balan · Answer 3 · 2016-05-26T10:09:28.647

You can do something like this

$('#privacy_check').change(function() {
  $(this).css({
    'outline-color': this.checked ? 'none' : 'red',
    'outline-style': this.checked ? 'none' : 'solid',
    'outline-width': this.checked ? '0' : 'thin'
  });
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="privacy_check" />

More simplified as @Rayon suggested

$('#privacy_check').change(function() {
  $(this).css("outline", this.checked ? 'none' : "thin solid red")
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="privacy_check" />

Consider `$("#privacy_check").css("outline", "thin solid red");`..I guess it will reduce redundant code.. — Rayon, May 26 '16 at 10:05

score 0 · Answer 4 · edited May 26 '16 at 10:08

0

Try this:

var $elem = $('#privacy_check');

if($elem.is(":checked")){
    $elem.css("outline", "thin solid red");
}
else{
   $elem.css("outline", "none");
}

edited May 26 '16 at 10:08

Niet the Dark Absol

320,036
81
464
592

answered May 26 '16 at 10:01

Edward Pham

73
1
8

You put `$('#privacy_check') into a variable but didn't use it :D I fixed it for you. – Niet the Dark Absol May 26 '16 at 10:08

writing if/else statement as ternary operator

4 Answers4