Javascript 选择单选按钮时添加jquery

我在一组中有两个单选按钮。 如果您通过html中的“checked”访问页面，则会选中第一个

我想使用javascript来调整一些css（通过javascript，而不是通过添加类）。 因此，如果选择了第一个单选按钮，我希望某个类得到一个

显示：none

，另一个类得到一个

显示：block

，但是当选择了第二个单选按钮时，我只希望与其他单选按钮相同，反之亦然

我的html是：

<li><input type="radio" name="kosten" id="maand" checked><label for="maand">per maand</label></li>
<li><input type="radio" name="kosten" id="jaar" ><label for="jaar">per jaar</label></li>

我想显示和消失的

div

s的一些示例

<li><strong><span class="bedrag-maand">some text</span> <span class="bedrag-jaar">some other text</span></strong></li>

一些文本一些其他文本

你知道我怎样才能让它工作吗？

试试类似的方法

jQuery(function(){
    var $spans = $('span[class*="bedrag"]').hide();
    $('input[name="kosten"]').change(function(){
        $spans.hide();
        $spans.filter('.bedrag-' + this.id).show();
    })
})

演示：

如果您可以向

bedrag-*

元素添加一个额外的类，那么它的功能将非常强大

<li><strong><span class="bedrag bedrag-maand">some text</span> <span class="bedrag bedrag-jaar">some other text</span></strong></li>

---

演示：

以下是代码，请尝试以下操作：

$( "input[type=radio]" ).on( "click",function(){
    if ($('#maand').is(':checked')){
        $('.bedrag-maand').css('display', 'block');
        $('.bedrag-jaar').css('display', 'none');
    } else {
        $('.bedrag-jaar').css('display', 'block');
        $('.bedrag-maand').css('display', 'none');
    }
});

---

您的

如果
缺少结束括号。这是在这里发布时的拼写错误吗？可能是@Harry的重复。这不是真的。只是编辑错过了最后一个。我试图编辑她的代码，但至少需要6个字符才能修改。所以我放弃了。@Dvir Harry是对的。if子句缺少括号。它仍然是错误的<代码>如果（此条款）应该关闭{…
非常感谢！我几乎让它工作了。我只剩下一个问题。因为第一个单选按钮是自动选择的，所以我希望bedrag Ma在访问页面时自动显示。当我现在访问时，它不会显示。我试图调整“var$spans=$（'.bedrag'）。hide（）；'在您的代码中，to.bedrag jaar但是通过访问页面是可以的，但是当我单击第二个单选按钮时，两个价格都会显示出来。您知道在切换单选按钮之前自动显示'bedrag maand'跨度的方法吗？@Maartje see或
jQuery(function(){
    var $spans = $('.bedrag').hide();
    $('input[name="kosten"]').change(function(){
        $spans.hide();
        $spans.filter('.bedrag-' + this.id).show();
    })
})

$( "input[type=radio]" ).on( "click",function(){
    if ($('#maand').is(':checked')){
        $('.bedrag-maand').css('display', 'block');
        $('.bedrag-jaar').css('display', 'none');
    } else {
        $('.bedrag-jaar').css('display', 'block');
        $('.bedrag-maand').css('display', 'none');
    }
});