There is a code

if ( $("#payment").hasClass("checked") ) { document.getElementById("uniform-id_carrier1300").style.display='none'; } else { document.getElementById("uniform-id_carrier1300").style.display='block'; }

With its implementation, everything works, but once. I wish there was a constant check of the class name. That is, if the element has the name of the class "checked", then hide the element, if this element does not have the name of the class "checked" then show.

  • And why are you using Jquery to write "document.getElementById" ?? - humster_spb
  • @humster_spb, as soon as possible) - vp_arth
  • I would like to clarify that there is no knowledge in js. Unfortunately ((The code above was taken from the Internet. - midagent
  • You need an onchange handler that keeps onchange changes, and for the corresponding handler, you need a code that “tuggles” the style to display the element (cut the display unit or remove it depending on what value it has now). - VostokSisters

3 answers 3

In the implementation of your checkbox, you can add the emission of a state transition event.

Find a place where the checked class changes. This is either .toggleClass('checked') , or the addClass/removeClass in different places.

In each, add the emission of the change event:

 $(this).trigger('change', [checked]); // checked - bool состояние чекбокса

Instead of this may have to write another variable indicating the variable element.

Then, in the client code you can catch this event:

 $('#payment').on('change', function(e, checked){ $('#blockToToggle')[checked?'show':'hide'](); });
  • My checkbox is made using tables. How to understand that tr was selected? When selected, is added to the class name "checked". As far as I understand, you can catch only by the name of the class. - midagent
  • that's where the class is added and add the trigger - vp_arth
  • if ( $("#payment").hasClass("checked") ) { $(this).trigger('change', [checked]); } else { $(this).trigger('change', [checked2]); } if ( $("#payment").hasClass("checked") ) { $(this).trigger('change', [checked]); } else { $(this).trigger('change', [checked2]); } - midagent
  • The code above does not work. What's wrong? - midagent
  • All wrong. You need a code with .addClass('checked') or toggle - vp_arth

Assuming that you cannot modify existing application code, you can use MutationObserver to track changes in the value of the class attribute.

In your case, the code might look something like this:

 var observer = new MutationObserver(function(mutations) { mutations.filter(function(mutation) { return (mutation.type === 'attributes' && mutation.attributeName === 'class'); }).forEach(function(mutation) { if ($(mutation.target).is('.checked')) { $('#extra-field').hide(); } else { $('#extra-field').show(); } }); }); observer.observe($('#payment').get(0), {attributes: true});

And here is a working example on JSFiddle.

Note:

Despite the fact that the approach with the use of MutationObserver is quite efficient, I would use it only as a “last resort”. This is too powerful and not an obvious solution to trivial tasks, like yours.

Instead, I would advise you to rewrite your custom checkbox so that it generates an onchange (or similar) event. How to do this is written in the next answer .

    Check the value of the checkbox when it changes, and in the same place hide or show the necessary block.

    You can follow the change with this - https://api.jquery.com/change/

    • How do you understand that there checkbox? - vp_arth
    • the fact is that there is not select, but a checkbox made with a div. - midagent
    • And when you put the class checked, you can not immediately hide / show the desired block? - anme
    • @vp_arth by class name - midagent
    • @anme change as I understand it works only on the field. In my case, it is possible to check only by the class name. - midagent