使用javascript在单选按钮选择上加载URL

Load URL on radio button select using javascript

本文关键字：加载 URL 选择 单选按钮 javascript 使用      更新时间：2023-09-26

当有人更改下拉列表时，我当前正在使用此HTML和Javascript片段来重新加载页面。。。

  <select id="dropdown">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
   var orderby = jQuery('#dropdown');
        var str;
        orderby.change(function(){
        str = jQuery(this).val();
        window.location.href = "http://www.example.com?variable="+str;
    });

现在我正在尝试更改它，使其适用于单选按钮，我的HTML看起来像。。。

<input type="radio" id="1" value="1"> 1
<input type="radio" id="2" value="2"> 2
<input type="radio" id="3" value="3"> 3

这是三个独立的项目，所以我还没能想出如何修改我的js片段以使其兼容，有人能帮忙吗？

HTML:

<input type="radio" name="myradio" id="1" class="myradio" value="1"> 1
<input type="radio" name="myradio" id="2" class="myradio" value="2"> 2
<input type="radio" name="myradio" id="3" class="myradio" value="3"> 3

jQuery:

$(function() {
    $('.myradio:not(:checked)').on('change', function() {
        window.location.href = "http://www.example.com?variable=" + this.value;
    });
});

概念验证

    $(function() {
        $('.myradio:not(:checked)').on('change', function() {
            alert( this.value );
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="myradio" id="1" class="myradio" value="1"> 1
    <input type="radio" name="myradio" id="2" class="myradio" value="2"> 2
    <input type="radio" name="myradio" id="3" class="myradio" value="3"> 3

试试这个：

$(function() { 
    $("#r1, #r2, #r3").change(function () { 
        str = $(this).val();
        window.location = "http://www.example.com?variable=" + str;
    })
});`
<input type="radio" id="r1" value="1"> 1</input>
<input type="radio" id="r2" value="2"> 2</input>
<input type="radio" id="r3" value="3"> 3</input>

首先，您的单选按钮缺少name属性，无法知道单选按钮组的名称。在你输入名称后，试试这个

jQuery("input:radio[name=GroupName]").click(function() {
    var value = jQuery(this).val();
    window.location.href = "http://www.example.com?variable="+value;
});

如果你想要跨浏览器兼容性（但使用更多DOM）：

jQuery("input:radio[name=GroupName]").click(function() {
    var value = jQuery('input:radio[name=theme]:checked').val();
    window.location.href = "http://www.example.com?variable="+value;
});

查看此问题了解更多信息：在jQuery中，如何根据元素的名称属性选择元素？

此外，在发布问题之前，你应该首先进行研究，因为大多数问题都已经得到了回答，你所需要的只是适应。

相关文章：