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

首先，为select和radio设置value是完全不同的，您这里有两个问题，您的选择值已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>