在单选按钮表单选项上附加链接

Append Link on Radio Form Options

本文关键字：链接 选项 单选按钮 表单      更新时间：2023-09-26

Issue 1

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

即如果用户点击选项 1（值="性别=男性"），那么我希望提交链接是

问题 2

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

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

$('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进行演示）。

引用：

  • 属性等于 （[ attribute="value" ]） 选择器。
  • attr() .
  • change() .
  • get() .
  • map() .
  • text() .
在

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

js小提琴演示

$('[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 + "&");
});

这是一种方法：

吉斯菲德尔

请注意，您的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();    
}
相关文章：