Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

86
Vistas
How to toggleClass dependent of selecting input

I have advanced work on my project generator of documents. It is simple. Someone write date and in document is written (e.x. name of company is used more 50 times, so this have so advantage).

select.onchange = function() {
  if (select == "firma") {
    $("#osoba_fizyczna").toggleClass('hidden', 'visibility');
    $('#firma').toggleClass('visibility', 'hidden');
  } else {
    $('#firma').toggleClass('hidden', 'visibility');
    $('#osoba_fizyczna').toggleClass('visibility', 'hidden');
  }
}
hidden {
  display: none;
}

visibility {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

First, you don't have any elements in your example which would be affected by your script and show the practical outcome. So I added two elements in the snippet below which have those IDs, the second one having the "hidden" class.

Second, use select.value in your condition instead of just select

And as a third step, I'd suggest to only use one class (in my snippet the "hidden" class) and toggle the display parameter with that - if it's removed, the element will have the default block display.

And last, CSS rules for classes need to have a dot in front of the class name to be valid class selectors.

select.onchange = function() {
  if (select.value == "Firma") {
    $('#osoba_fizyczna').toggleClass('hidden');
    $('#firma').toggleClass('hidden');
  } else {
    $('#firma').toggleClass('hidden');
    $('#osoba_fizyczna').toggleClass('hidden');
  }
}
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="firma" class="hidden">This is the "firma" element</div>
<div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>

And actually, with just two option values you could write the function a lot simpler:

select.onchange = function() {
  $('#osoba_fizyczna, #firma').toggleClass('hidden');
}
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="firma" class="hidden">This is the "firma" element</div>
<div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

I think you're confused about a few things. First, toggleClass() doesn't take two class arguments. You'd toggle two as 'one two'. See https://api.jquery.com/toggleclass.

Then, classes are defined in CSS with dots at the front, as .hidden. Really, though, you don't even need to do that. Just use jQuery's show() and hide() methods.

Also, you need to target your select element by ID differently. You were targeting all select elements with a native JavaScript technique that wasn't quite right.

$('#select').change(function() {
  if ($(this).val() === "Firma") {
    $("#osoba_fizyczna").hide();
    $('#firma').show();
  } else {
    $('#firma').hide();
    $('#osoba_fizyczna').show();
  }
});
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="osoba_fizyczna" class="hidden">osoba_fizyczna</div>
<div id="firma" class="hidden">firma</div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

for the Javascript part, as the toggleCalss can't take two parameters I think it is better to use the addClass and removeClass functions.

select.onchange = function() {
          if ($("#select").val() == "Firma") {
            $("#osoba_fizyczna").addClass('visibility').removeClass('hidden');
            $('#firma').addClass('hidden').removeClass('visibility');
          } else {
            $("#firma").addClass('visibility').removeClass('hidden');
            $('#osoba_fizyczna').addClass('hidden').removeClass('visibility');
          }
}

For the CSS part, I just add a dot . to mention that it is a class

.hidden {
    display: none;
}

.visibility {
     display: block;
}

For the HTML part, I add Ids for the two options

<select id="select">
                <option id="osoba_fizyczna" value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
                <option id="firma" value="Firma">firma</option>
</select>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda