【问题标题】:jQuery addClass if radio button checked如果选中单选按钮,则jQuery addClass
【发布时间】: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>

【问题讨论】:

    标签: jquery radio-button parent checked


    【解决方案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');
          }
      });
      

      【讨论】:

      • 谢谢!这实际上找到了选中的单选按钮,而不仅仅是检查页面上是否检查了输入。这使我可以在选中的单选按钮上应用一个类。
      • 我觉得这段代码更令人满意:stackoverflow.com/questions/3376412/…
      猜你喜欢
      • 2018-02-20
      • 2012-09-05
      • 2011-10-03
      • 1970-01-01
      • 1970-01-01
      • 2011-08-21
      • 2017-09-02
      • 1970-01-01
      • 2015-04-06
      相关资源
      最近更新 更多