switching bool values in Javascript

Question

This is a weird issue: I have a HTML attribute that will only be true or false, i fetch it with Jquery and turn it into a boolean, then i switch it for the opposite (true to false, false to true), then i change the same HTML attribute with the new boolean value.

It works at first, when the original attr value is false and it get set to true, but not the other way around:

<button aria-checked="false" class="toggle-search" type="button">
    Toggle button is <span>false</span>
</button>

And now the Js/Jquery

$(".toggle-search").click(function(){      

    var status = !$(this).attr("aria-checked"); 
    // returns string, turn to bool

    $(this).attr("aria-checked",!status);
    $(this).children("span").html(!status);

});

https://jsfiddle.net/kaqyhc48/4/

I dont understand what's going on with the logic, is the new value not being parsed to false or maybe being parsed to false first and then to true?

Thanks for the help

If you know the values will only ever be "true" and "false" you can read them into true and false with JSON.parse. — Jared Smith
– Jared Smith, Commented Mar 22, 2018 at 21:12
aria-checked="false" will be evaluated as true since it is retrieved as a string. You could use the strict equality if ($(this).attr('aria-checked') === 'false') — Stphane
– Stphane, Commented Mar 22, 2018 at 21:12
@MartinBarker aria attributes are a real thing.... developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA — epascarello
– epascarello, Commented Mar 22, 2018 at 21:21
@Mackan aria-checked is a real thing: developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/… — Jared Smith
– Jared Smith, Commented Mar 22, 2018 at 21:37

Sebastian Speitel · Accepted Answer · 2018-03-22 21:15:03Z

2

You have to parse the string to a boolean value. The simplest way to do it is value == "true", which returns true, when the string is "true" and false otherwise.

To parse it back to a string you can use value ? "true" : "false".

$(".toggle-search").click(function() {

  var status = $(this).attr("aria-checked") == "true";
  status = !status;
  // returns string, turn to bool

  $(this).attr("aria-checked", status);
  $(this).children("span").html(status ? "true" : "false");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button aria-checked="false" class="toggle-search" type="button">
    Toggle button is <span>false</span>
</button>

answered Mar 22, 2018 at 21:15

Sebastian Speitel

7,3772 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yajiv · Accepted Answer · 2018-03-22 21:20:41Z

0

var status = !$(this).attr("aria-checked"); this will not convert string to bool. So replace it with var status = 'true'== $(this).attr("aria-checked"); which will convert string to bool.

And in .html(false) will not be printed so use .html((false).toString())

$(".toggle-search").click(function(){      

        var status = 'true'== $(this).attr("aria-checked");
        $(this).attr("aria-checked",!status);
        $(this).children("span").html((!status).toString());
        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button aria-checked="false" class="toggle-search" type="button">
  Toggle button is <span>false</span>
</button>

answered Mar 22, 2018 at 21:20

yajiv

2,9492 gold badges17 silver badges25 bronze badges

Collectives™ on Stack Overflow

switching bool values in Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related