Home Forums General Issues Make a true-and-false switch flip another


Make a true-and-false switch flip another

  • I have four true-and-false switches and was attempting to use conditional logic to show and hide certain ones based on which ones were flipped “on”. But I felt the user experience was suffering, because showing and hiding is abrupt (animation might help), plus I didn’t want to hide the choices from my user. Ideally, I wanted certain switches to turn “off” if a certain switch is turned “on” and vice-versa – this way the switches are always visible but still prevent any user error.

    Finally found a solution after studying acf-input.js. I’m happy to hear any tips for improvement.

    function toggleSwitches(fields) {
      if ( fields.length === 0 ) {
      $.each(fields, function(i, name){
        $field = acf.get_field(switches[name]);
        var targetSwitch = acf.fields.true_false.set('$field', $field);;
    acf.add_action('load_field/type=true_false', function( $el ){
      //foreach true_false field, we grab its data
      var $data = acf.get_data($el);
      //then store all true_false fields with their keys
      switches[$] = $data.key;
      $el.on('change', '.acf-switch-input', function() {
          //get the element that was clicked on, and get its data
          var $field = acf.get_field('', $(this).parents('.acf-field'));
          var $field_data = acf.get_data($field);
          var fields = [];
          //if the element that was clicked on == your target then ...
          if ( $field_data.key === "field_597aac101749c" ) {
            //when this switch is flipped, the switches in the following array will turn off
            fields = [
          } else {
            //And if any of the above 3 switched are flipped, I want the fourth one to switch off
            fields = [

    switches demo

  • This is very interesting. In all the time I spent looking at input.js I never realized there was a javascript equivalent to get_field(). I’ll definitely be looking at this more closely the next time I need to build custom JS for fields. Thank you for taking the time to share your work.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.