Jquery 根据单选按钮选择的号码显示div

我有4个div需要与所选单选按钮旁边的数字相称地显示。所以，如果我点击1，那么只有div1显示。如果我选择3，那么div的1到3显示。我在这个网站上看到过一些解决方案，其中显示或隐藏了一个div或元素。我还没有发现任何允许你从一个id中选择一个数字，然后显示那个div数的东西

我的HTML非常简单：

<input type="radio" name="sNum" value="1"><span>1</span>
<input type="radio" name="sNum" value="2"><span>2</span>
<input type="radio" name="sNum" value="3"><span>3</span>
<input type="radio" name="sNum" value="4"><span>4</span>
<br />
<div id="g1" class="gSet">
  content here
</div>
<div id="g2" class="gSet">
  content here
</div>
<div id="g3" class="gSet">
  content here
</div>
<div id="g4" class="gSet">
  content here
</div>

我只是不知道如何去做这件事，欢迎任何建议，而不是我根据我所知道的做一个胡乱的决定。我知道我需要获取所选输入的值，并将其与相应ID匹配-

$('input').on('change',function(){
    var val = $(this).val();
    $('div.gSet').hide();
    $("div.gSet:lt("+val+")").show();
});

工作演示->

---

为什么要选择.gSet元素两次？-$。gSet.hide.filter:lt+this.value+show@Andreas-您的解决方案运行良好。“我只需要确保所有的div一开始都被隐藏起来。”安德烈亚斯-我找到了答案。我忘了在css中放置display:none。我现在好了。谢谢你的帮助。我学到了很多。看来还需要更多的阅读。非常感谢你的帮助。我尝试的方式太离谱了。我学到了很多。谢谢大家。

$('input:radio').on('change',function(){
    $('#g'+$(this).val()).show().siblings('div').hide();
});