Question

问题1

我是jquery和前端的新手。我试图根据选择的单选按钮更改链接的值。当用户选择单选按钮时，我想在提交链接中附加相应无线电选择的值。值得注意的是，在用户选择该选择中的另一个单选按钮的情况下，值会改变。

即。如果用户点击选项1（value =“sex = male”），那么我希望提交链接为

第2期

我知道如何使用jquery执行此操作，但我想知道与问题相关的最佳解决方案1.一旦用户选择单选按钮，我希望“订单摘要”说明用户选择。

Answer 1

在SO中发布您的代码。请不要只给小提琴链接。

$('[name=sex]').change(function () {
    var sex;
    if ($(this).val().indexOf("=male") >= 0) {
        $('#sex-male').show();
        $('#sex-female').hide();
        sex = "male";
    } else {
        $('#sex-male').hide();
        $('#sex-female').show();
        sex="female"
    }
    $('#link').append("sex=" + sex + "&");
});
$('[name=duration]').change(function () {
    var duration;
    if ($(this).val().indexOf("duration=6months") >= 0) {
        $('#duration-6').show();
        $('#duration-12').hide();
        duration = 6;
    } else {
        $('#duration-6').hide();
        $('#duration-12').show();
        duration = 12;
    }
    $('#link').append("duration=" + duration + "&");
});

Answer 2

我能看到的最简单的方法如下：

$('input[type="radio"]').change(function () {
    var queryString = $('input[type="radio"]:checked').map(function () {
        $('#' + this.name).text(this.name + ': ' + this.value);
        return this.name + '=' + this.value;
    }).get().join('&');
    $('#link').attr('href', function () {
        return 'example.com/cart?' + queryString;
    });
});

JS Fiddle demo

请记住，我已将span更改为a（使用原生href属性），还更正了部分HTML错误，并减少了不必要的HTML（所有br元素都没有必要，使用CSS进行演示）。

参考文献：

Attribute-equals ([attribute="value"]) selector。
attr()。
change()。
get()。
map()。
text()。

Answer 3

这是一种方法：

JSFIDDLE

请注意，您的HTML有点奇怪，所以我稍微改了一下。我添加了一个超链接来设置（#link）上的href属性和一个显示它的范围，以便你可以看到它被设置为什么（#linkdisplay）

javascript：

$(function(){
    var sex = 'male';
    var duration= '6';
    updateSummary(sex, duration);

    $('.sex-label').hide();
    $('.duration-label').hide();

    $("input[name='sex']").click(function(){
      sex = $(this).val();
      updateLink(sex, duration);  
      updateSummary(sex, duration);
    }); 

    $("input[name='duration']").click(function(){
      duration = $(this).val();
      updateLink(sex, duration);
      updateSummary(sex, duration);
    });
});


function updateLink(sex, duration){
    $('#link').attr('href', 'example.com/cart?sex=' + sex + '&duration=' + duration);
    $('#linkdisplay').html($('#link').attr('href'));
}

function updateSummary(sex, duration){
      $('.sex-label').hide();
      $('#sex-' + sex).show();
      $('.duration-label').hide();
      $('#duration-' + duration).show();    
}

在电台表格选项上附加链接

3 个答案: