On mouseenter, if a checkbox is checked, do X, else do Y

Question

I am trying to have a checkbox on a page to show/hide passwords in password boxes. If they are hidden, then they will instead show on hover of that item.

The only thing I am struggling with is that the var is saved on page load along with when the rest of the jquery loads. How can I, on every mouseenter/leave, make sure that the checkbox is checked or not?

jsfiddle

window.hide_passwords = $('#hide_passwords').attr('checked');

if(hide_passwords) {
    $("main table tbody tr").on({
        mouseenter: function() {
            $(this).children('td:first-child').children('input').attr('type', 'text');
        },
        mouseleave: function() {
            $(this).children('td:first-child').children('input').attr('type', 'password');
        }
    });
} else {
    $('input[type="password"]').attr('type', 'text');
}

$('#hide_passwords').click(function() {
    if($(this).prop('checked')) {
        window.hide_passwords = false;
    } else {
        window.hide_passwords = true;
    }
});

possible duplicate of [Check checkbox checked property using jQuery](http://stackoverflow.com/questions/901712/check-checkbox-checked-property-using-jquery) — Daniel, May 20 '14 at 13:01
I was wrong as i said this won't work. I created a demo to test different possiblilty of changeing input types from password to text and vice versa: http://jsfiddle.net/NicoO/jtTtb/ — Nico O, May 20 '14 at 13:42

Anoop Joshi P · Accepted Answer · 2014-05-20T13:03:45.347

3

Use .is(":checked") to check whether the checkbox is checked or not.

window.hide_passwords = $('#hide_passwords').attr('checked');


    $("main table tbody tr").on({
        mouseenter: function () {
            if ($("#hide_passwords").is(":checked")) {
                $(this).children('td:first-child').children('input').attr('type', 'text');
            }
        },
        mouseleave: function () {
            if ($("#hide_passwords").is(":checked")) {
                $(this).children('td:first-child').children('input').attr('type', 'password');
            }
        }
    });

Demo

edited May 20 '14 at 13:03

answered May 20 '14 at 12:58

Anoop Joshi P

25,373
8
32
53

1

Ahh. `is` you sneaky bugger, that's why it wasn't working when i tried :checked – user2992596 May 20 '14 at 14:27

ndugger · Answer 2 · 2014-05-20T13:10:39.350

var window.hide_passwords = document.getElementById("hide_passwords");
window.hide_passwords = window.hide_passwords.checked
var container = document.querySelectorAll("main table tbody tr");
var i = 0, length = container.length;
for (i; i < length; i++) {
    container[i].addEventListener("mouseover", function() {
        if (window.hide_passwords) {
            // Your stuff here
        } else {

        }
    }
}

I only work in Native JS, so sorry about the disconnect.

score 0 · Answer 3 · answered May 20 '14 at 13:17

You can use bind and unbind methods for same behavior.

window.hide_passwords = $('#hide_passwords').attr('checked');
showPass();

function showPass() {
    $("main table tbody tr").on({
        mouseenter: function () {
            $(this).children('td:first-child').children('input').attr('type', 'text');
        },
        mouseleave: function () {
            $(this).children('td:first-child').children('input').attr('type', 'password');
        }
    });
}

$('#hide_passwords').click(function () {
    if ($(this).prop('checked')) {
        showPass();
    } else {
        $('input[type="password"]').attr('type', 'password');
        $("main table tbody tr").unbind();
    }
});

Demo

On mouseenter, if a checkbox is checked, do X, else do Y

3 Answers3