Question

我正在使用此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片段以兼容，有人可以帮忙吗？

Answer 1

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

Answer 2

试试这个：

$(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>

Answer 3

首先，您的无线电缺少名称属性，以了解单选按钮组的名称。在您输入名称之后尝试这样的

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;
});

请查看此问题以获取更多信息：In jQuery, how do I select an element by its name attribute?

此外，在发布问题之前，您应该首先进行研究，因为大多数问题已经得到解答，您只需要进行调整。

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

3 个答案: