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

我还是jQuery的新手，还在苦苦挣扎。最后，我可以让jQuery在单击按钮时切换显示/隐藏。我现在仍在努力解决的是如何让显示/隐藏与页面加载时按钮的状态相匹配。该值来自使用php的数据库。所以我不知道会是什么。我真的很感谢你的帮助

基本上，如果选中id为“specify”的按钮，则显示div中的文本；如果选中“打开”按钮，则文本将隐藏。我设置了css，以便为div指定类使其隐藏。我应该那样做吗

代码如下：

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>

.specify{display:none;}

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

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

jQuery:

<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>

.specify{display:none;}

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

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

---

我认为创建一个类来隐藏

是解决这个问题的一种相当标准的方法。做得好！使用CSS方法时，使用

addClass

或

removeClass

同样容易，而不是在

上使用
show
或
hide
功能。另外，如果需要在页面加载时使用PHP应用类，可以显示
的初始状态

<div <? if($thisvolneed=='specify'){echo 'class="specify"';} ?>><p>Some info...</p></div>

一次小小的尝试：

<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>


。指定{显示：无；}
对所有人开放
指定所需志愿者的类型
一些信息

$（文档）.ready（函数（）{
$（'.myOption'）。单击（函数（）{
var$stat=$（'#指定'）[0]。选中；
如果（$stat==true）
$（'.specify'）.show（）；
其他的
$（'.specify'）.hide（）；
});
});

我相信它也可以再次优化。
太棒了！正是我想听的！我全神贯注于jQuery，没有考虑如何使用php。谢谢你，迈克尔！我在CSS中创建了一个show类和一个hide类，并使用php根据值设置了相应的类，正如您所建议的那样。工作得很好！仅供参考以下代码片段将使用jQuery执行相同的目标<代码>if（$（'#specify'）.attr（'checked'））$（'.specify'）.addClass（'specify'）…但是最好用PHP应用这个类，因为我们可以。谢谢！很高兴知道在构建页面时最好使用php，然后使用jQuery客户端。：）伟大的这回答了我将要问的一个关于我的网站上的另一个显示/隐藏的问题。它使用复选框来隐藏和显示，我无法让它们在重新单击时隐藏。非常感谢。