Question

我在一组中有两个radiobutton。如果您通过html中的“已检查”访问该页面，则会检查第一个..

我想用javascript来调整一些css（通过javascript，而不是通过添加一个类）。因此，如果第一个被选中，我希望某个类获得display:none而另一个类获得display: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>

我尝试了一些jquery，但我真的很糟糕。

if ($('input#maand').is(':checked'){
$('.bedrag-jaar').css('display', 'none');
}

我希望显示并消失的div的一些示例。

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

你知道我怎么能让这个工作吗？

Answer 1

尝试类似

的内容

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

演示：Fiddle

如果你可以为bedrag-*元素添加额外的类，那么它可以做得非常强大，如

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

然后

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

演示：Fiddle

Answer 2

以下是代码并尝试：

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

JSFIDDLE

选择单选按钮时添加jquery

2 个答案: