Can 2 conditionals be combined like this?

Question

I want to 1)display an alert if ("#one") is checked and ("#two") isn't checked. Then display a different alert if both are checked. What I have does the first part right, then displays both alerts on the second part.

$("#one").click(function() {
    if($(this).is(":checked") && $("#two").is(":not(:checked)")) {
    alert("foo");
    } else {
        if($(this).is(":checked") && $("#two").is(":checked")) {
            alert("foo foo");
        }
    }
});

score 3 · Accepted Answer · edited May 23 '17 at 09:58

3

You're overcomplicating it, I think.

$("#one").click(function() {
    var thisIsChecked = this.checked,
        twoisChecked = $('#two').get(0).checked;

    if(thisIsChecked) {
         if (twoisChecked) {
            alert('foo foo');    //  <----
         }                       //      |  note the switch
         else {                  //      |
            alert('foo');        //  <----
         }
    }
});

See also: When to use Vanilla JavaScript vs. jQuery?

edited May 23 '17 at 09:58

Community

1
1

answered Mar 09 '11 at 03:46

Matt Ball

354,903
100
647
710

can you explain the comma separated variable? and the .get(0) what does that do? – Dirty Bird Design Mar 09 '11 at 04:37
@Dirty: the comma separated is more-or-less equivalent to separate `var` statements. Some people, like [Douglas Crockford](http://www.jslint.com/lint.html), advocate using a single `var` statement per function. See [this question](http://stackoverflow.com/questions/810313/). The [`.get()`](http://api.jquery.com/get) call returns the underlying DOM element (not a jQuery element) so that you can access the `.checked` attribute rather than making a more-expensive `.attr()` call when it's just not necessary. – Matt Ball Mar 09 '11 at 04:41
very good, thanks. I'll try and incorporate this. I really appreciate it man. – Dirty Bird Design Mar 09 '11 at 04:48

score 1 · Answer 2 · answered Mar 09 '11 at 03:46

1

$("#one").click(function() {
    if(this.checked) {
       var $two = $("#two");
       if (!$two.is(":checked")) {
            alert("foo");
       } else {
            alert("foo foo");
       }
    }
});

answered Mar 09 '11 at 03:46

Reigel Gallarde

64,198
21
121
139

score 1 · Answer 3 · answered Mar 09 '11 at 03:47

1

It looks fine to me. Example of this in action here: http://jsfiddle.net/andypaxo/9vJGL/

Is this the behaviour that you want?

answered Mar 09 '11 at 03:47

andypaxo

6,171
3
38
53

had a selector wrong, i guess it was ok to begin with. thx @andypaxo! – Dirty Bird Design Mar 09 '11 at 04:11
1

@Dirty: you're still making things more complicated (and much less efficient!) than needed, amigo. – Matt Ball Mar 09 '11 at 04:12
@Matt - I know, man I'm trying. which method is best? I'm familiar with ternary operators, but instead of vanilla alert's I'm using jAlert dialog boxes so those are out. – Dirty Bird Design Mar 09 '11 at 04:36
@Dirty: ternary operators? Where did [the conditional operator](https://developer.mozilla.org/en/JavaScript/Reference/Operators/Special/Conditional_Operator) come into this? – Matt Ball Mar 09 '11 at 04:43
in Jordan's example. I'm a little more familiar with those, from PHP and had tried it, but couldn't use my jAlert boxes. – Dirty Bird Design Mar 09 '11 at 04:49

score 1 · Answer 4 · answered Mar 09 '11 at 03:53

1

JSfiddle with solution

HTML:

<form>
   <input id="one" type="checkbox" />
   <input id="two" type="checkbox" />
</form>

JS:

var one = $("#one");
var two = $("#two");

one.click(function() {    
    if (one.is(":checked"))  {
        if (two.is(":checked")) {
           alert("foo foo"); 
        } else {
           alert("foo");
        }  
    }
});

answered Mar 09 '11 at 03:53

Adam Ayres

8,732
1
32
25

trying it out, but I need variables to be local as there will be a lot of these – Dirty Bird Design Mar 09 '11 at 03:59
You could write it like this, I only make them variables to cache the lookups: `$("#one").click(function() { if ($(this).is(":checked")) { if ($("#two").is(":checked")) { alert("foo foo"); } else { alert("foo"); } } });` – Adam Ayres Mar 09 '11 at 04:01

score 1 · Answer 5 · answered Mar 09 '11 at 04:00

1

I'd refactor a bit to get rid of the nested ifs and dry things up a bit:

$("#one").click(function() {
    if(!this.checked) { return }
    var message = $("#two").is(':checked') ? 'foo foo' : 'foo';
    alert(message)
});

answered Mar 09 '11 at 04:00

Jordan

1,230
8
8

Can 2 conditionals be combined like this?

5 Answers5