选择单选按钮时添加jquery答案

【问题标题】：Add jquery when radio button is selected选择单选按钮时添加jquery
【发布时间】：2013-10-27 02:37:05
【问题描述】：

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

我想使用 javascript 来调整一些 css（通过 javascript，而不是通过添加类）。因此，如果选择了第一个，我希望某个类获取display:none和另一个类A 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');
}

我想出现和消失的divs 的一些示例。

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

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

【问题讨论】：

您的if 缺少右括号。这是在这里发帖时的拼写错误吗？
stackoverflow.com/questions/4674020/…的可能重复
@Harry 这不是真的。只是编辑漏掉了最后一个。我试图编辑她的代码，但至少需要 6 个字符才能更改。所以我放弃了。
@Dvir Harry 是正确的。 if 子句中缺少括号。
还是错了...if(thisClauseShouldBeClosed{...

标签： javascript jquery html css radio-button

【解决方案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

【讨论】：

非常感谢！我差点搞定了。我只剩下一个问题了。因为第一个单选按钮是自动选择的，所以我希望 bedrag-maand 在访问页面时自动显示。当我现在访问时，它不显示。我试图调整 'var $spans = $('.bedrag').hide();'在您的 .bedrag-jaar 代码中，但访问该页面就可以了，但是当我单击第二个单选按钮时，两个价格都会显示。你知道在切换单选按钮之前自动显示“bedrag-maand”跨度的方法吗？
@Maartje 见jsfiddle.net/arunpjohny/gFahm/2 或jsfiddle.net/arunpjohny/US3tP/2

【解决方案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

【讨论】：