EN VI

Jquery - delete checked radio button on option change?

2024-03-12 20:30:13
How to Jquery - delete checked radio button on option change

I have a form that does not allow to create "conditions". The first radio input selects "yes" or "no", then it can choose "other" and a free text field appears. If you change your mind once you click other, then clicking on the other option still remains selected other. Basically I would like to have the checked removed if the initial option is changed. I will leave the code and thank you.

$("input[type='radio']").on("change", function() {
  if ($('#documentazione_Sì').is(':checked')) {
    $("#documentazione_ok").show();
    $("#documentazione_ok").prop('required', true);
  } else {
    $("#documentazione_ok").hide();
    $("#documentazione_ok").prop('required', false);
  }

  if ($('#documentazione_No').is(':checked')) {
    $("#documentazione_nono").show();
    $("#documentazione_nono").prop('required', true);
  } else {
    $("#documentazione_nono").hide();
    $("#documentazione_nono").prop('required', false);
  }

  if ($('#documentazione_nono_altro, #documentazione_ok_altro').is(':checked')) {
    $("#altro-manuali").show();
    $("#altro-manuali").prop('required', true);
  } else {
    $("#altro-manuali").hide();
    $("#altro-manuali").prop('required', false);
    $("#altro-manuali").prop('checked', false);
  }

  if ($('#documentazione_Sì #documentazione_ok_altro, #documentazione_No #documentazione_nono_altro').is(':checked')) {
    $("#documentazione_nono_altro").prop('checked', false);
    $("#documentazione_ok_altro").prop('checked', false);
  } else {}
});
#documentazione_ok {
  display: none;
}

#documentazione_nono {
  display: none;
}

#altro-manuali {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.19.1/css/uikit-core.min.css" integrity="sha512-61ZZY3YIjr821vHbtfOTRIGYiRSPE6nA5IVt8ndGZcXa2iRfAcuWPAdt7HyQC23AGo1+dwAd+DOPUzz64K6GsA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<h1 class="uk-h3 uk-margin-remove-top uk-margin-remove-bottom" data-id="page#1-0-1-7" data-element=""> Title
</h1>
<div data-id="page#1-0-1-8" data-element="" class="uk-margin">
  <fieldset data-yooessentials-form-field="documentazione" style="border-width: 0; margin: 0; padding: 0;">
    <div class="uk-form-controls">
      <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
        <label class="uk-flex uk-margin-right uk-first-column">
                    <div><input id="documentazione_Sì" type="radio" name="documentazione" class="uk-radio" value="Sì" data-id="page#1-0-1-8-0"></div>
                    <div class="uk-margin-small-left">Sì            </div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_No" type="radio" name="documentazione" class="uk-radio" value="No" data-id="page#1-0-1-8-1"></div>
                    <div class="uk-margin-small-left">No    </div>
                </label>
      </div>
    </div>
    <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
  </fieldset>
</div>
<div data-id="page#1-0-1-9" data-element="" id="documentazione_ok" class="uk-margin" style="display: none;">
  <fieldset data-yooessentials-form-field="documentazione_ok" style="border-width: 0; margin: 0; padding: 0;">
    <div class="uk-form-controls">
      <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid uk-grid-stack" uk-grid="">
        <label class="uk-flex uk-margin-right uk-first-column">
                    <div><input id="documentazione_ok_Il manuale non trattava il caso specifico" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non trattava il caso specifico" data-id="page#1-0-1-9-0"></div>
                    <div class="uk-margin-small-left">1</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_ok_Il manuale non era chiaro" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non era chiaro" data-id="page#1-0-1-9-1"></div>
                    <div class="uk-margin-small-left">2</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_ok_altro" type="radio" name="documentazione_ok" class="uk-radio" value="altro" data-id="page#1-0-1-9-2"></div>
                    <div class="uk-margin-small-left">Altro</div>
                </label>
      </div>
    </div>
    <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
  </fieldset>
</div>
<div data-id="page#1-0-1-10" data-element="" id="documentazione_nono" class="uk-margin">
  <fieldset data-yooessentials-form-field="documentazione_nono" style="border-width: 0; margin: 0; padding: 0;">
    <div class="uk-form-controls">
      <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
        <label class="uk-flex uk-margin-right uk-first-column">
                    <div><input id="documentazione_nono_Il manuale cartaceo non era presente" type="radio" name="documentazione_nono" class="uk-radio" value="Il manuale cartaceo non era presente" data-id="page#1-0-1-10-0"></div>
                    <div class="uk-margin-small-left">3</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_nono_Non ho accesso all’area riservata del sito" type="radio" name="documentazione_nono" class="uk-radio" value="Non ho accesso all’area riservata del sito" data-id="page#1-0-1-10-1"></div>
                    <div class="uk-margin-small-left">4</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_nono_Non sapevo dove reperirli" type="radio" name="documentazione_nono" class="uk-radio" value="Non sapevo dove reperirli" data-id="page#1-0-1-10-2"></div>
                    <div class="uk-margin-small-left">5</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_nono_altro" type="radio" name="documentazione_nono" class="uk-radio" value="altro" data-id="page#1-0-1-10-3"></div>
                    <div class="uk-margin-small-left">Altro</div>
                </label>
      </div>
    </div>
    <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
  </fieldset>
</div>
<div data-id="page#1-0-1-11" data-element="" id="altro-manuali" class="uk-margin" style="display: none;">
  <div data-yooessentials-form-field="altromanuali">
    <div class="uk-form-controls">
      <textarea class="uk-textarea" id="altromanuali" name="altromanuali"></textarea>
    </div>
    <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
  </div>
</div>

Solution:

I simplified the script.

Clear all rads when clicking Sí or No, and then toggle relevant divs

const $rads = $("input[type='radio']").on("change", function() {
  let siClicked = this.id === 'documentazione_Sì';
  let noClicked = this.id === 'documentazione_No';
  const showAltro = this.id === 'documentazione_nono_altro' || this.id === 'documentazione_ok_altro';
  if (siClicked || noClicked) {
    $rads.each(function() { // uncheck all rads
      this.checked = false;
    });
    this.checked = true; // check the clicked rad
  }
  let si = $('#documentazione_Sì').is(":checked");
  let no = $('#documentazione_No').is(":checked");
  $("#documentazione_ok")
    .toggle(si)
    .prop('required', si);
  $('#documentazione_nono')
    .toggle(no)
    .prop('required', no);
  // showAltro could also be set using the altro checked prop
  $("#altro-manuali").toggle(showAltro);
  $("#altro-manuali").prop('required', showAltro);
});
#documentazione_ok {
  display: none;
}

#documentazione_nono {
  display: none;
}

#altro-manuali {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.19.1/css/uikit-core.min.css" integrity="sha512-61ZZY3YIjr821vHbtfOTRIGYiRSPE6nA5IVt8ndGZcXa2iRfAcuWPAdt7HyQC23AGo1+dwAd+DOPUzz64K6GsA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<h1 class="uk-h3 uk-margin-remove-top uk-margin-remove-bottom" data-id="page#1-0-1-7" data-element=""> Title
</h1>
<div data-id="page#1-0-1-8" data-element="" class="uk-margin">
  <fieldset data-yooessentials-form-field="documentazione" style="border-width: 0; margin: 0; padding: 0;">
    <div class="uk-form-controls">
      <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
        <label class="uk-flex uk-margin-right uk-first-column">
                    <div><input id="documentazione_Sì" type="radio" name="documentazione" class="uk-radio" value="Sì" data-id="page#1-0-1-8-0"></div>
                    <div class="uk-margin-small-left">Sì            </div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_No" type="radio" name="documentazione" class="uk-radio" value="No" data-id="page#1-0-1-8-1"></div>
                    <div class="uk-margin-small-left">No    </div>
                </label>
      </div>
    </div>
    <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
  </fieldset>
</div>
<div data-id="page#1-0-1-9" data-element="" id="documentazione_ok" class="uk-margin" style="display: none;">
  <fieldset data-yooessentials-form-field="documentazione_ok" style="border-width: 0; margin: 0; padding: 0;">
    <div class="uk-form-controls">
      <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid uk-grid-stack" uk-grid="">
        <label class="uk-flex uk-margin-right uk-first-column">
                    <div><input id="documentazione_ok_Il manuale non trattava il caso specifico" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non trattava il caso specifico" data-id="page#1-0-1-9-0"></div>
                    <div class="uk-margin-small-left">1</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_ok_Il manuale non era chiaro" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non era chiaro" data-id="page#1-0-1-9-1"></div>
                    <div class="uk-margin-small-left">2</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_ok_altro" type="radio" name="documentazione_ok" class="uk-radio" value="altro" data-id="page#1-0-1-9-2"></div>
                    <div class="uk-margin-small-left">Altro</div>
                </label>
      </div>
    </div>
    <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
  </fieldset>
</div>
<div data-id="page#1-0-1-10" data-element="" id="documentazione_nono" class="uk-margin">
  <fieldset data-yooessentials-form-field="documentazione_nono" style="border-width: 0; margin: 0; padding: 0;">
    <div class="uk-form-controls">
      <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
        <label class="uk-flex uk-margin-right uk-first-column">
                    <div><input id="documentazione_nono_Il manuale cartaceo non era presente" type="radio" name="documentazione_nono" class="uk-radio" value="Il manuale cartaceo non era presente" data-id="page#1-0-1-10-0"></div>
                    <div class="uk-margin-small-left">3</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_nono_Non ho accesso all’area riservata del sito" type="radio" name="documentazione_nono" class="uk-radio" value="Non ho accesso all’area riservata del sito" data-id="page#1-0-1-10-1"></div>
                    <div class="uk-margin-small-left">4</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_nono_Non sapevo dove reperirli" type="radio" name="documentazione_nono" class="uk-radio" value="Non sapevo dove reperirli" data-id="page#1-0-1-10-2"></div>
                    <div class="uk-margin-small-left">5</div>
                </label>
        <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_nono_altro" type="radio" name="documentazione_nono" class="uk-radio" value="altro" data-id="page#1-0-1-10-3"></div>
                    <div class="uk-margin-small-left">Altro</div>
                </label>
      </div>
    </div>
    <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
  </fieldset>
</div>
<div data-id="page#1-0-1-11" data-element="" id="altro-manuali" class="uk-margin" style="display: none;">
  <div data-yooessentials-form-field="altromanuali">
    <div class="uk-form-controls">
      <textarea class="uk-textarea" id="altromanuali" name="altromanuali"></textarea>
    </div>
    <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
  </div>
</div>

Tags
Jquery
uikit
Pinned Posts
Top 5 Best High CPM Ads Networks For Publishers In 2023
Tags: ads,  Publishers,  Ads Networks
2022-05-24 10:11:32
HawkHost Coupon 2023 – Hawk Hosting Discount Code Up to 40% Lifetime Update Every Day
Tags: Server,  host,  cloud
2022-04-15 16:23:09
Author
Avatar
Best Solution
Bot Lv 9
Join Date: 2022-04-13
Keyword
delete checked radio button on option change, jquery, uikit
Answer

Login

Forgot Your Password?

Create Account

Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login