0

我的页面中有以下输入单选按钮（除其他外），它在选中该单选按钮时显示一个选择输入框。

这是使用 javascript 实现的。现在，如果禁用了 javascript，客户端还希望在单击单选按钮时显示此选择框。

没有javascript，这甚至可能吗？我看到的唯一另一种方式是有一个中间表单提交按钮来处理？我不知道该怎么做。任何帮助，将不胜感激！

到目前为止，这是我的代码：

<td style="visibility:<?= $Visible;?>" id="rmark1"><span>Mark question?</span></td>
<td style="visibility:<?= $Visible;?>" id="rmark2" nowrap>
<input type="radio" id="mail1" name="mail" value="GE" onClick="showMark();" <?= $check;?> >
            <select id="ReturnMarkings" name="ReturnMarkings">
                <option value=''>Please Choose One:</option>
                <option value='1' <?= $Array[1];?>>Mark 1</option>
                <option value='2' <?= $Array[2];?>>Mark 2</option>

            </select>

function showMark() {
    var pcRMark1=document.getElementById('rmark1');
    var pcRMark2=document.getElementById('rmark2');

    pcRMark1.style.visibility="visible";
    pcRMark2.style.visibility="visible";
}
4

4 回答 4

4

根据浏览器的 CSS 支持，这可能有效：

#ReturnMarkings{ display: none; }
#mail1:checked+#ReturnMarkings { display:inline; }​

请参阅jsfiddle 演示。

它依赖于 CSS 相邻兄弟选择器，根据caniuse.com ，IE8+ 支持该选择器。我还依赖于:checked伪类，根据 MDN，它是 IE9+。

于 2012-11-14T17:52:13.067 回答
3

要达到类似的效果，您需要结合使用 PHP 和 CSS。必须应用以下更改。（抓紧，这不会很漂亮）

单选按钮需要更改为链接，假设您的页面名为 form.php，链接必须变成这样：

<a href='form.php?showmark=true'>Show Mark</a>

在您的选择框下方添加以下逻辑，PHP 将通过该逻辑注入 CSS，这将使您的下拉列表可见：

<select id="ReturnMarkings" name="ReturnMarkings">
     <option value=''>Please Choose One:</option>
     <option value='1' <?= $Array[1];?>>Mark 1</option>
     <option value='2' <?= $Array[2];?>>Mark 2</option>
</select>

<?
   if(isset($_GET["showmark"])) {
?>

        <style type='text/css'>
        #ReturnMarkings {
            visibility:visible!important;
        }​
        </style>
<?
   }
?>

我不特别建议混合 PHP / Markup / CSS，但这可能是你唯一的解决方案

于 2012-11-14T17:54:52.353 回答
2

@bfavaretto 和 @lostsource 的答案很棒——但这不需要 PHP 并且可以在 Chrome 中使用：

<style type="text/css">
    #ReturnMarkings {
        display: none;
    }
    :target {
        display: inline !important;
    }
</style>

<input type="radio" id="mail1" name="mail" value="GE"><a style='width:12px; height:12px; display:inline-block; margin-left:-12px;' href='#ReturnMarkings'></a>  

<select id="ReturnMarkings" name="ReturnMarkings">
                <option value=''>Please Choose One:</option>
                <option value='1'>Mark 1</option>
                <option value='2'>Mark 2</option>
            </select>

单选按钮链接代码的 @lostsource 道具

演示@http://jsfiddle.net/MT5db/

编辑：

正如评论中所指出的，这实际上并没有“检查”单选按钮。这是一个修复的廉价黑客，未经 jsfiddle 外部测试：

http://jsfiddle.net/MT5db/1/

于 2012-11-14T18:40:40.020 回答
-1

不，没有 JavaScript 是不可能的。

于 2012-11-14T17:38:20.743 回答