php - JavaScriptを無効にしてクリック機能をシミュレートする

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デモを参照してください。

これは、 caniuse.comによるとIE8+でサポートされているCSS隣接兄弟セレクターに依存しています。: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/マークアップ/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への小道具

デモ@http://jsfiddle.net/MT5db/

編集：

コメントで指摘されているように、これは実際にはラジオボタンを「チェック」しません。jsfiddleの外部でテストされていない、修正するための安価なハックは次のとおりです。

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

Answer 4

いいえ、JavaScriptなしでは不可能です。