Question

我的页面中有以下输入单选按钮（以及其他内容），在检查该单选按钮时会显示一个选择输入框。

这是使用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";
}

Answer 1

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

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

请参阅jsfiddle demo。

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

Answer 2

要获得类似的效果，您需要使用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，但这可能是您唯一的解决方案

Answer 3

@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道具获取单选按钮链接代码

demo @ http://jsfiddle.net/MT5db/

修改：

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

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

Answer 4

不，没有JavaScript就不可能。

在禁用javascript的情况下模拟点击功能

4 个答案: