製作取決於所選擇的單選按鈕

我已a form to process user input using PHP若干字段集顯示中的一個，和第一個問題詢問用戶以選擇的三個單選按鈕，以填寫「類型」參數之一 - 可用的選項是「書」，「雜誌」和「網站」，代碼如下所示：製作取決於所選擇的單選按鈕

<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>

再往下的頁面，我有三個字段集（使用<fieldset>），每個對應的類型之一。我希望一次只顯示其中一個顯示，具體取決於所選的單選按鈕，以使頁面看起來更清晰。

不幸的是，我是一個完全的JavaScript noob，而我最後一次嘗試真的讓事情非常糟糕。該字段集已經有ID（boxBook,boxJournal和boxWebsite），儘管它們目前沒有做任何特殊的事情。

如果它影響什麼，我想輸出是有效的HTML5，並適度地降低，顯示所有三個字段集如果用戶有JS禁用。

任何幫助，將不勝感激^^

來源

2012-12-03 georgewatson

使用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 Fiddle demo。

順便提及，而不是在radio輸入的id執行字符串操作，這將會是容易要麼使用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 Fiddle demo。

編輯後者的代碼塊，以滿足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 Fiddle demo。

雖然，坦率地說，我認爲我已經過度複雜了很多。但它確實工作，並且滿足評論中指定的需求：

如果其中一個單選按鈕被默認選中，則字段集不會顯示。我想有它默認爲預定如果可能的話

來源

2012-12-03 18:31:37

更好地更改單選按鈕的值以與ID完全對應。如果沒有別的，它會使代碼更具可讀性。 – Blazemonger

@Blazemonger：同意;正在編輯它，儘管我使用了'data- *'屬性，因爲'value'可能完全用於另一個目的=） –

是的，值'由處理輸入的PHP使用。無論如何，我已經試過這個代碼，它隱藏了字段集，但它似乎沒有再次顯示它們。 – georgewatson

你應該在頭一個腳本元素中使用的功能，大致是以下

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-03 18:32:44 djjeck

我的答案是沒有外部庫，但我沒有注意到這個問題被標記爲jQuery。 OP，你最喜歡什麼？ – djjeck

我不介意。我以這種方式對它進行了標記，因爲我已經安裝了JQuery，所以如果它是最好的方法，我就可以使用它。 – georgewatson

製作取決於所選擇的單選按鈕

回答

相關問題