执行javascript代码并根据$ id = $ _ GET ['id']检查单选按钮;当页面加载时

时间:2013-10-09 06:58:43

标签: javascript php jquery ajax html5

请帮帮我一些...... 当页面加载时,如果 $ Id = pack radiobutton 打包,则选中 DIV PACK显示:阻止;

如果 $ id = ind ,则选择radiobutton ind并选择 DIV ind显示:阻止;

<?PHP
    $id=$_GET['id'];
?>
<!DOCTYPE>
<html>
    <body>

        <label>Package</label>
        <input type="radio" name="package" value="pack"  
                <?php if($id=='pack') 
                    { 
                        echo"checked"; 
                        echo"<script type=\"text/javascript\">";
                        echo"document.getElementById(\"package\").style.display=\"block\"";
                        echo"</script>";
                     } ?> 
         >

        <label>Individual</label>
        <input type="radio" name="package" value="ind" 
                 <?php if($id=='ind') 
                     {
                       echo"checked"; 
                       echo"<script type=\"text/javascript\">";
                       echo"document.getElementById(\"individual\").style.display=\"block\"";
                       echo"</script>";
                      } ?> 
         >

        <div id="package" style=" display:none; height:100px; background-color:#a00; color:#fff;">
            Display this div if PACKAGE is checked
        </div>

        <div id="individual"  style=" display:none; height:100px; background-color:#a00; color:#fff;">
            Display this div if INDIVIDUAL is checked
        </div>
    </body>
</html>

3 个答案:

答案 0 :(得分:0)

试试这个:

<?PHP
    $id=$_GET['id'];
?>
<!DOCTYPE>
<html>
    <body>

        <label>Package</label>
        <input type="radio" name="package" value="pack"  >



        <label>Individual</label>
        <input type="radio" name="package" value="ind"   >



        <div id="package" style=" display:none; height:100px; background-color:#a00; color:#fff;">
            Display this div if PACKAGE is checked
        </div>

        <div id="individual"  style=" display:none; height:100px; background-color:#a00; color:#fff;">
            Display this div if INDIVIDUAL is checked
        </div>
                        <?php if($id=='pack') 
                    { 
                        echo"checked"; 
                        echo"<script type=\"text/javascript\">";
                        echo"document.getElementById(\"package\").style.display=\"block\"";
                        echo"</script>";
                     } ?> 
                                      <?php if($id=='ind') 
                     {
                       echo"checked"; 
                       echo"<script type=\"text/javascript\">";
                       echo"document.getElementById(\"individual\").style.display=\"block\"";
                       echo"</script>";
                      } ?> 
    </body>
</html>

答案 1 :(得分:0)

你可以使用一点CSS和jQuery来完成客户端整个“点击广播节目/隐藏那个div”的事情。

$(document).ready(function () {
     $("input[type=radio]").click(function () {
        var showId = $(this).val() === 'pack' ? 'package' : 'individual';
        var hideId = (showId === 'package') ? 'individual' : 'package';
        $('#' + showId).show();
        $('#' + hideId).hide();
    });
});

这是DEMO

除了hide()和show()之外,您还可以使用toggle()或toggleClass()以及“show”或“隐藏”CSS类,正如Sudhir指出的那样。

这样的解决方案可以让你的代码更加清洁:)

答案 2 :(得分:-1)

你不需要js,你可以这样做, 创建css类

.hide {
  display: none;
}
.show {
  display: block
}

并在php文件中

$packChecked = ($id == "pack") ? "checked='checked'" : "";
$indChecked = ($id == "ind") ? "checked='checked'" : "";
$packClass = ($id == "pack") ? "show" : "hide";
$indClass = ($id == "ind") ? "show" : "hide";
then apply, like:
<input type="radio" name="package" value="pack" <?php echo $packChecked; ?> />
<div id="package" class="<?php echo $packClass; ?>">
...
</div>
//similarly for another radio button