0

第一期

我一般是 jquery 和前端的新手。我正在尝试根据选择的单选按钮更改链接的值。当用户选择一个单选按钮时，我想在提交链接中附加相应单选选择的值。重要的是，如果用户在该选择中选择了另一个单选按钮，则值会发生变化。

即如果用户点击选项 1(value="sex=male") 那么我希望提交链接是

第 2 期

我知道如何用 jquery 做到这一点，但我想知道与问题 1 相关的最佳解决方案。一旦用户选择了一个单选按钮，我希望“订单摘要”说明用户的选择。

4

3 回答 3

0

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

jsFiddle 演示

$('[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 + "&");
});
于 2013-11-11T22:03:30.037 回答
0

这是一种方法：

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();    
}
于 2013-11-11T22:36:24.043 回答
0

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

$('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 小提琴演示。

请记住，我已将 更改span为a（以使用本机href属性），并更正了一些 HTML 错误，并减少了不必要的 HTML（所有br元素都不是必需的，使用 CSS 进行演示）。

参考：

于 2013-11-11T22:26:59.440 回答