Параметр URL и проверка входного радио

Question

Мне нужна помощь, чтобы активировать проверенное на входе радио при отправке параметра URL.

Вот пример из CodePen

$(function() {
  $(".form-select-wrap>div").hide();
  $("#select-speed").change(function() {
    var currentSelection = $('#select-speed :selected').val();
    var search = $(this).val();
    $(".form-select-wrap>div").hide()
    $('.' + search).show();
  })


  function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
  }

  var val = getURLParameter("speed");
  var valPackage = getURLParameter("package");

  if (val) {
    $("#select-speed")
      .val(val)
      .change(); //  assign URL param to select field
  }
  if (valPackage) {
    console.log(valPackage);

    $(".form-select-wrap>div>input:radio")
      .val(valPackage)
      .attr('checked', true);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select-speed" name="checkSpeed">

  <option>Select Speed</option>

  <option value="form-speed-30">30</option>

  <option value="form-speed-100">100</option>

  <option value="form-speed-300">300</option>
</select>

<section class="form-select-wrap">

  <section class="form-select-wrap">
    <div class="form-speed-30">
      <input type="radio" data-name="Bundle Packages" name="Bundle-Packages" value="30Mbps Family Pack (Promo)"><span>30Mbps Family Pack (Promo)</span><br>
      <input type="radio" data-name="Bundle Packages" name="Bundle-Packages" value="30Mbps Family Pack"><span>30Mbps Family Pack</span>
    </div>
    <div class="form-speed-100">
      <input type="radio" data-name="Bundle Packages" name="Bundle-Packages" value="100Mbps Family Pack (Promo)"><span>100Mbps Family Pack (Promo)</span><br>
      <input type="radio" data-name="Bundle Packages" name="Bundle-Packages" value="100Mbps Family Pack"><span>100Mbps Family Pack</span>
    </div>
    <div class="form-speed-300">300mbps only</div>
  </section>
</section>

Заранее спасибо.

Answer 1

Во-первых, настройки value для select и radio совершенно разные, у вас есть две проблемы здесь, ваше значение выбора имеет form-speed-, но вы пропустили, также для поиска флажок по значению и сделать его проверенным, вы должны попробуйте это:

$(".form-select-wrap>div>input:radio").each(function() {
      if ($(this).val() === valPackage) {
        $(this).attr('checked', true);
      }
});

Или:

$(".form-select-wrap>div>input:radio[value='" + valPackage + "']").attr('checked', true);

Но вы использовали .val(valPackage), это установит все значения флажка!

$(function() {
  $(".form-select-wrap>div").hide();
  $("#select-speed").change(function() {
    var currentSelection = $('#select-speed :selected').val();
    var search = $(this).val();
    $(".form-select-wrap>div").hide()
    $('.' + search).show();
  })


  function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
  }

  var val = '30' //getURLParameter("speed");
  var valPackage = '30Mbps Family Pack (Promo)' //getURLParameter("package");

  if (val) {
    console.log(val)
    $("#select-speed")
      .val('form-speed-' + val)
      .change(); //  assign URL param to select field
  }
  if (valPackage) {
    console.log(valPackage);
    $(".form-select-wrap>div>input:radio[value='" + valPackage + "']").attr('checked', true);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select-speed" name="checkSpeed">
  <option>Select Speed</option>
  <option value="form-speed-30">30</option>
  <option value="form-speed-100">100</option>
  <option value="form-speed-300">300</option>
</select>

<section class="form-select-wrap">
  <section class="form-select-wrap">
    <div class="form-speed-30">
      <input type="radio" data-name="Bundle Packages" name="Bundle-Packages" value="30Mbps Family Pack (Promo)"><span>30Mbps Family Pack (Promo)</span><br>
      <input type="radio" data-name="Bundle Packages" name="Bundle-Packages" value="30Mbps Family Pack"><span>30Mbps Family Pack</span>
    </div>
    <div class="form-speed-100">
      <input type="radio" data-name="Bundle Packages" name="Bundle-Packages" value="100Mbps Family Pack (Promo)"><span>100Mbps Family Pack (Promo)</span><br>
      <input type="radio" data-name="Bundle Packages" name="Bundle-Packages" value="100Mbps Family Pack"><span>100Mbps Family Pack</span>
    </div>
    <div class="form-speed-300">300mbps only</div>
  </section>
</section>