How to select multiple elements with JQuery?-CodePudding

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  id="toggleVisibility"></i>
@Html.PasswordFor(m => m.Password, new { @class = "form-control", maxlength = 50 })

CodePudding user response：

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  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  id="toggleVisibility">Click to toggle</i><br/>
<input type="text"  value="text"/> <br/>
<input type="password"  value="pass" />

CodePudding user response：

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.