1

PHP を使用してユーザー入力を処理するフォームを作成しました。最初の質問では、「type」パラメーターを入力する 3 つのラジオ ボタンのいずれかを選択するようにユーザーに求めます。使用可能なオプションは、「book」、「journal」、および「」です。 web サイト」であり、コードは次のようになります。

<strong>Type of work:</strong>
<input type="radio" name="type" id="book" value="book" checked="checked" /> <label for="book">Book</label>
<input type="radio" name="type" id="journal" value="journal" /> <label for="journal">Journal</label>
<input type="radio" name="type" id="website" value="website" /> <label for="website">Website</label>

ページのさらに下には、3 つのフィールドセット ( を使用<fieldset>) があり、それぞれがタイプの 1 つに対応しています。ページをきれいに見せるために、選択したラジオ ボタンに応じて、一度に 1 つのみ表示したいと考えています。

残念ながら、私はまったくの JavaScript 初心者であり、前回の試行で事態が大きく悪化しました。フィールドセットには既に ID ( boxBook、boxJournal、およびboxWebsite) がありますが、現在のところ特別なことは何もしていません。

何か影響がある場合は、出力を有効な HTML5 にして、ユーザーが JS を無効にしている場合は 3 つのフィールドセットをすべて表示して、適切に劣化させたいと思います。

どんな助けでも大歓迎です^^

4

2 に答える 2

1

jQueryを使用することをお勧めします：

// hides the elements using jQuery (so they're visible without JavaScript)
$('#boxBook, #boxJournal, #boxWebsite').hide();

// when the radio inputs whose name is equal to "type" is changed:
$('input:radio[name="type"]').change(function() {
    var id = this.id;

    // hides all the fieldset elements whose `id` starts with "box":
    $('fieldset[id^="box"]').hide();

    // looks for the element with the id equal to
    // `box` + upper-cased first-letter of this.id +
    // the substring from second-letter onwards of this.id
    $('#box' + id[0].toUpperCase() + id.substring(1)).show();
});​

JS フィドルのデモ。

ちなみに、入力に対して文字列操作を実行するよりもid、radio属性を使用して対象の要素をdata-*正確に指定する方が簡単です。id

<input type="radio" id="book" name="type" data-targets="boxBook" />

そして使用：

$('#boxBook, #boxJournal, #boxWebsite').hide();

$('input:radio[name="type"]').change(function() {
    var id = $(this).attr('data-targets'); // or: $(this).data('targets');
    $('fieldset[id^="box"]').hide();
    $('#' + id).show();
});​

JS フィドルのデモ。

OPの要件を満たすために、後者のコードブロックを編集しました。

$('input:radio[name="type"]').change(function() {
    $(this).siblings('input:radio[name="type"]').each(function() {
        $('#' + $(this).data('targets')).hide();
    });
    $('#' + $(this).data('targets')).show();
}).filter(function() {
    return !this.checked;
}).each(function() {
    $('#' + $(this).data('targets')).hide();
});​

JS フィドルのデモ。

とはいえ、率直に言って、かなり複雑にしすぎたと思います。しかし、それは機能し、コメントで指定されたニーズを満たしています:

ラジオ ボタンの 1 つがデフォルトでオンになっている場合、フィールドセットは表示されません。できればデフォルトで予約したい

于 2012-12-03T18:31:37.940 に答える
0

次のように、head 内の script 要素で関数を使用する必要があります。

function chooseFieldset(id) {
  document.getElementById('boxBook'   ).style.display =
      (id == 'book')   ?'display':'none';
  document.getElementById('boxJournal').style.display =
      (id == 'journal')?'display':'none';
  document.getElementById('boxWebsite').style.display =
      (id == 'website')?'display':'none';
}

次に、すべてのラジオの属性を使用して、ラジオ ボタンがクリックされるたびに id を呼び出すことができます。

onClick="chooseFieldset(this.id);"
于 2012-12-03T18:32:44.080 に答える