如果选中单选按钮，则jQuery addClass

Posted 2023-03-05

【中文标题】如果选中单选按钮，则jQuery addClass

【英文标题】：jQuery addClass if radio button checked

【发布时间】：2011-12-19 21:45:35

【问题描述】：

谁能帮我解决这个问题？

$(document).ready(function() 
    if(
        $("input.check").is(":checked"))
            $(this).parent().addClass("question-box-active");
    
);

我正在尝试将一个类 (question-box-active) 添加到 .check (一个单选按钮) 的父级，前提是它被选中。如果我使用警报进行测试，它可以正常工作，但我无法设法添加该类。

感谢大家的帮助。

更新：这是表单的 html。我只复制了 48 个 div 中的 3 个。您可能已经猜到，如果在页面加载时已选中单选按钮，我正在尝试向问题框添加一个类。到目前为止还没有运气。

<div class="question-box">
    <input class="check" type="checkbox" name="question-1" value="1" <?php if(isset($_POST['question-1'])) echo "checked"; ?> />
    <span class="question">1. Save a rainforest or grow organic vegetables</span>
</div>

<div class="question-box alt">
    <input class="check" type="checkbox" name="question-2" value="1" <?php if(isset($_POST['question-2'])) echo "checked"; ?> />
    <span class="question">2. Solve complicated math problems</span>
</div>

<div class="question-box">
    <input class="check" type="checkbox" name="question-3" value="1" <?php if(isset($_POST['question-3'])) echo "checked"; ?> />
    <span class="question">3. Act in a movie, play, or television show</span>
</div>

【参考方案1】：

试试类似的东西

$('input.check').is(':checked').each(function()  
    $(this).parent().addClass('question-box-active');
);

【参考方案2】：

我认为$(this) 不是指您的情况下的单选按钮

您可以绑定单选按钮的点击事件并决定从那里做什么...

$(document).ready(function()
    $("input.check").click(function()
        if($(this).is(":checked"))
            $(this).parent().addClass("question-box-active");
        
    );
);

【讨论】：

感谢您的回答卡夫曼。表单设置为在单击提交后刷新页面以显示表单的结果。我已经有一个单击功能，当用户主动检查单选按钮时，它会添加问题框活动类。但是当页面刷新结果时，即使选中了按钮，该类也会消失。

【参考方案3】：

您使用的 this 位于 ready 处理程序回调的函数上下文中，因此它没有像您预期的那样指向 input.check。

试试这样的方法：

$(document).ready(function() 

    var foo = $('input.check');

    if ( foo.is(':checked') ) 
        foo.parent().addClass('question-box-active');
    

);

这是假设您的代码逻辑是正确的。但是，我假设您正在尝试做与 Doug 在另一个答案中提供的类似的事情。发布一些 HTML 可能有助于澄清。

【讨论】：

感谢理查德的帮助。我将 HTML 添加到我原来的问题中，希望这能有所帮助。我喜欢 jQuery，但我还不太擅长。我尝试了您提供的代码，但该课程已添加到所有父母，甚至是那些未选中单选按钮的父母。我仍然在玩它，看看我是否可以挖掘出一些东西，但是如果你有任何其他想法，请告诉我。快把我逼疯了。

【参考方案4】：

这会起作用。

$(document).ready(function() 

    var foo = $('input.check:checked');

    if ( foo.is(':checked') ) 
        foo.parent().addClass('question-box-active');
    
);

【讨论】：

谢谢！这实际上找到了选中的单选按钮，而不仅仅是检查页面上是否检查了输入。这使我可以在选中的单选按钮上应用一个类。

我觉得这段代码更令人满意：***.com/questions/3376412/…