根据 url 中的链接检查单选按钮

Question

我已经使用 PHP OOP 创建了电子商务网站自定义。有一个问题表格，在第一个问题中有3个复选框：

 1. Daily
 2. Weekly
 3. Monthly

在我的主页上，有 3 个<a> 链接按钮：

 1. Order Daily
 2. Order Weekly
 3. Order Monthly

我希望当我点击 Order Daily 时，它会引导我提问表单页面，但它应该默认选择 Daily 单选按钮，与其他 2 个按钮和 2 个其他单选按钮相同。我不知道我该怎么做。 截图如下：
See Screenshot 1
See Screenshot 2
现在，请参见第二个屏幕截图，我已将链接放在这 3 个按钮中，以根据按钮链接 defaultSelect="monthly"、defaultSelect="weekly" 和 defaultSelect="daily" 默认选择，但我不知道如何使其在 jQuery 中工作。
这是主页 html 代码：

<div>
    <a class="btn btn-sm btn-danger" href="customize-package.php?questions=<?php echo $result['pro_id']; ?>&defaultSelect=monthly">Order Monthly</a>
</div>
<div>
    <a class="btn btn-sm btn-danger" href="customize-package.php?questions=<?php echo $result['pro_id']; ?>&defaultSelect=weekly">Order Weekly</a>
</div>
<div>
    <a class="btn btn-sm btn-danger" href="customize-package.php?questions=<?php echo $result['pro_id']; ?>&defaultSelect=daily">Order Daily</a>
</div>

这里是 html 代码中的问题：

<div class="select_package_validity">
    <h5 class="h5-responsive font-weight-bold q1_text"></h5>
    <div class="package_validity_child">
        <div class="custom-control custom-radio custom-control-inline ml-4 plan_name_daily">
            <input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily">
            <label class="custom-control-label" for="daily">Daily</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline ml-4 plan_name_weekly">
            <input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
            <label class="custom-control-label" for="weekly">Weekly</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline plan_name_monthly">
            <input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
            <label class="custom-control-label" for="monthly">Monthly</label>
        </div>
    </div>
    <input type="hidden" name="plan_name" class="form-control selected_plan_name" />
</div>

这里是 jQuery 代码：

$('input[name="plan_name_selector"]:first').attr("checked", true);

如何根据链接选择单选按钮？ 请帮帮我

Answer 1

这个 jQuery 代码将有助于从 url 获取 defaultSelect 值并检查单选按钮。

$(document).ready(function(){
  // Get Options in URL seprated by '?'
  var url = window.location.search;

  // Remove First Character '?' from URL string
  url = url.substr(1);

  // Split URL options and create array by '&' character
  var urlArr = url.split('&');

  //Loop through each Element of Array
  $.each(urlArr, function(){   
    // Create Variables dynamically and assign values using '=' sign
    window[this.split('=')[0]] = this.split('=')[1].toLowerCase();
  });

  // Loop throught each Input Radio
  $('.select_package_validity').find('input.custom-control-input').each(function(){

    // Get Radio button value
    var radioVal = $(this).attr('value').toLowerCase();

    // Match radio value and dynamically created 'defaultSelect' value
    if(radioVal == defaultSelect){
      // If values are same, check radio button
      $(this).attr('checked', true);
    }
  });
});

Answer 2

在您的customize-package.php 中，您应该从 URL 获取 dailySelector 的当前值

if( isset( $_GET['dailySelector'] ) ) {
    $dailySelector = $_GET['dailySelector'] 
} else {
    $dailySelector = 'daily';
}

然后在 JS 中你可以使用下面的代码来设置文档加载的值

<script>

$(document).ready(function() {
    var dailySelector = '<?php echo $dailySelector; ?>';
    $('#' + dailySelector).prop('checked', true);
});
</script>

Answer 3

请从控制器发送 defaultSelectRadio 值

var selectRadiovalue ='' $("input[name=plan_name_selector][value=" + selectRadiovalue + "]").prop('checked', true);

Answer 4

我有谷歌然后我发现如何以完美的方式使用 jQuery 获取 URL 参数。然后我输入if else 条件并查看，它对我来说超级完美。

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

var defaultRadioPlan = getUrlParameter('defaultPlanSelect');
if(defaultRadioPlan === 'oneday'){
    $('.plan_name_oneday input').attr("checked", true);
} else if(defaultRadioPlan === 'weekly'){
    $('.plan_name_weekly input').attr("checked", true);
} else if(defaultRadioPlan === 'monthly'){
    $('.plan_name_monthly input').attr("checked", true);
}