dswmmvrg40957
2011-03-24 02:57
浏览 57

php / jQuery根据数据库中的单选按钮设置更改是否显示/隐藏

I'm still new at jQuery and struggling. Finally, I can get jQuery to toggle show/hide when the button is clicked. What I'm still struggling with now is how to get show/hide to match up with the state of the button on page load. The value is coming from the database using php. So I don't know what it will be. I'd really appreciate some help!

Basically, if the button with id of 'specify' is checked, the text in the div shows; if the 'open' button is checked, the text is hidden. I set up the css so the specify class for the div makes it hidden. Should I have done that?

Here is the code:

HTML

<input type="radio" name="volneed" id="open" class="required" value="open to all"
 <? if($thisvolneed=='open'){echo 'checked="checked"';} ?> />
<label for="open"> Open to all </label>

<input type="radio" name="volneed" id="specify"  class="required" value="specify"
<? if($thisvolneed=='specify'){echo 'checked="checked"';} ?> /> 
<label for="specify"> Specify types of volunteers needed </label>

<div class="specify"><p>Some info...</p></div>

CSS:

.specify{display:none;}

jQuery:

$(document).ready(function() {          
    $("#specify").change(function(evt) {
    evt.preventDefault();
    $(".specify").show();
    });

    $("#open").change(function(evt) {
    evt.preventDefault();
    $(".specify").hide();
    });
});

图片转代码服务由CSDN问答提供 功能建议

我仍然是jQuery的新手并且苦苦挣扎。 最后,当点击按钮时,我可以让jQuery切换显示/隐藏。 我现在仍在努力的是如何让show / hide与页面加载时按钮的状态相匹配。 该值来自使用php的数据库。 所以我不知道它会是什么。 我真的很感激一些帮助!

基本上,如果选中id为'specified'的按钮,则div中的文字显示; 如果选中“打开”按钮,则隐藏文本。 我设置了css,因此div的指定类使其隐藏。 我应该这样做吗?

以下是代码:

HTML < pre> &lt; input type =“radio”name =“volneed”id =“open”class =“required”value =“open to all” &lt;? if($ thisvolneed =='open'){echo'check =“checked”';}?&gt; /&gt; &lt; label for =“open”&gt; 打开所有&lt; / label&gt; &lt; input type =“radio”name =“volneed”id =“指定”class =“required”value =“指定” &lt;? if($ thisvolneed =='specified'){echo'check =“checked”';}?&gt; /&GT; &lt; label for =“指定”&gt; 指定所需志愿者的类型&lt; / label&gt; &lt; div class =“指定”&gt;&lt; p&gt;一些信息......&lt; / p&gt;&lt; / div&gt;

CSS:

  .specify {display:none;} 
    
 
 

jQuery:

  $(document).ready(function(){
 $(“#specified”)  .change(function(evt){
 \ evt.preventDefault(); 
 $(“。specified”)。show(); 
}); 
 
 $(“#open”)。change(function  (evt){
 \ evt.preventDefault(); 
 $(“。specified”)。hide(); 
}); 
}); 
   
 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dtl19910708 2011-03-24 03:17
    已采纳

    I think creating a class to hide the <div> is a fairly standard way to approach the problem. Well done! Instead of using the show or hide function on the <div>, it is just as easy to use addClass or removeClass when using the CSS approach. Also, the initial state of the <div> can be shown by using PHP to apply the class if necessary on page load.

    <div <? if($thisvolneed=='specify'){echo 'class="specify"';} ?>><p>Some info...</p></div>
    
    点赞 打赏 评论
  • dqmg80654 2011-03-24 03:25

    a small try:

    <style>
    .specify{display:none;}
    </style>
    <script src="jquery.min.js"></script>
    <input type="radio" name="volneed" id="open" class="required myOption" value="open to all" checked="checked" />
    <label for="open"> Open to all </label>
    
    <input type="radio" name="volneed" id="specify"  class="required myOption" value="specify" /> 
    <label for="specify"> Specify types of volunteers needed </label>
    
    <div class="specify"><p>Some info...</p></div>
    <script>
        $(document).ready(function(){
            $('.myOption').click(function(){
                var $stat = $('#specify')[0].checked;
                if( $stat == true )
                    $('.specify').show();
                else
                    $('.specify').hide();
            });
        });
    </script>
    

    m sure it can be again optimized too..

    点赞 打赏 评论

相关推荐 更多相似问题