Lowercase and Uppercase with jQuery

Question

How do I transpose a string to lowercase using jQuery? I've tried

var jIsHasKids = $('#chkIsHasKids').attr('checked').toLowerCase();

but it doesn't work. What am I doing wrong?

Solution 1

I think you want to lowercase the checked value? Try:

var jIsHasKids = $('#chkIsHasKids:checked').val().toLowerCase();

or you want to check it, then get its value as lowercase:

var jIsHasKids = $('#chkIsHasKids').attr("checked", true).val().toLowerCase();

Solution 2

If it's just for display purposes, you can render the text as upper or lower case in pure CSS, without any Javascript using the text-transform property:

.myclass {
    text-transform: lowercase;
}

See https://developer.mozilla.org/en/CSS/text-transform for more info.

However, note that this doesn't actually change the value to lower case; it just displays it that way. This means that if you examine the contents of the element (ie using Javascript), it will still be in its original format.

Solution 3

Try this:

var jIsHasKids = $('#chkIsHasKids').attr('checked');
jIsHasKids = jIsHasKids.toString().toLowerCase();
//OR
jIsHasKids = jIsHasKids.val().toLowerCase();

Possible duplicate with: How do I use jQuery to ignore case when selecting

Comments

[rafaelphp]

for input text work like this: let toLowercase = function () { jQuery('.tolowercase').on('keypress keydown blur',function () { let currentVal = jQuery(this).val(); jQuery(this).val(currentVal.toLowerCase()); }); };