How to select multiple elements with JQuery?

Question

My objective is making a function to toggle password visibility. The problem is that in the same Doc I have 3 different inputs that I also need the toggle visibility function, tho these inputs are not related to the password.

I tried with the name attribute, but it felt like over complicating, since I had names for each icon and input.I have no idea what to use to make the function, and I know there must be an easier way.

<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
@Html.PasswordFor(m => m.Password, new { @class = "form-control", maxlength = 50 })

Answer 1

You can add an event handler on every fa-eye elements to toggle its next element if it is an input .

And there would be nothing to change on your razor extention method call.

 $(".fa-eye").on("click", function(){ let nextInput = $(this).next("input"); let visibility = nextInput.css("opacity") == "1"? 0: 1; $(this).next("input").css("opacity", visibility) })

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> <input id="Password" name="Password" type="password" class="form-control" maxlength="50" value="" /><br> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> <input id="Password2" name="Password2" type="password" class="form-control" maxlength="50" value="" /><br> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> <input id="Password3" name="Password3" type="password" class="form-control" maxlength="50" value="" /><br>

Answer 2

You could use a class to match each input. Add the class to each input you want to hide/show. Then handle the click event and toggle the visibility:

<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
// add 'toggle-vis' class to each input
@Html.PasswordFor(m => m.Password, new { @class = "form-control toggle-vis", maxlength = 50 })

...
// jquery
$('#toggleVisibility').on('click', function() {
    $('.toggle-vis').toggle();
})

 $('#toggleVisibility').on('click', function() { $('.toggle-vis').toggle(); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility">Click to toggle</i><br/> <input type="text" class="toggle-vis" value="text"/> <br/> <input type="password" class="toggle-vis" value="pass" />

Answer 3

Try in your js file:

let input = $(select your input1)
let input2 = $(select your input2)
let input3 = $(select your input3)

function show_hide() {
input.toggle()
input2.toggle()
input3.toggle()
}

summon it upon your event.