風格的知名度和javascript

我想要一個特定的'div'是可見的，當我選擇一個單選按鈕，並希望相同的div來隱藏，當我選擇其他單選按鈕。我怎樣才能做到這一點。以下是我的嘗試。請讓我們知道這裏有什麼問題。風格的知名度和javascript

<label>For State govt. Ex- Employee 
<span class="small">Select if you are a state govt. ex-employee</span> 
</label> 
<p> 
    <label>Yes</label> 
    <input type="radio" name="stateGov" id="stategov" value="yes" class="choice" onClick="stateGovOptions()"/> 
    <label>No</label> 
    <input type="radio" name="stateGov" id="stategov" value="no" class="choice" onClick="stateGovOptions()"/> 
</p> 

<!-- State govt. ex- employees --> 
<div id="stateOptions" style="visibility:hidden"> 
<label> 
<span class="small">Select </span> 
</label> 
<p> 
<select title="stateGovExEmp" name="stateGovExEmp" id="fdivision"> 
    <option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option> 
    <option value="less">Less than or equal to one year</option> 
    <option value="between">More then one but less than two years</option> 
    <option value="more">More than two years</option> 
</select> 
</p> 
</div>

當「是」單選按鈕，然後用id「stateoptions」股利應該是可見的，當按下「否」單選按鈕，它應該得到再次隱藏。爲了達到這個目的，我嘗試了一下。

/* displays the contents when state gov ex-employee selected and removes it when not selected */ 
function stateGovOptions() 
{ 
    if(document.getElementById('stategov').value == 'yes') 
     document.getElementById('stateOptions').setAttribute('style','visibility:visible'); 
    else 
     document.getElementById('stateOptions').setAttribute('style','visibility:hidden'); 
}

按Yes按鈕會顯示所需的div，但按下任何按鈕，也使它可見，儘管在js函數的「其他」塊。

請解釋一下我在這裏錯過了什麼。

來源

2013-10-06 qre0ct

，因爲你已經使用了你的HTML是無效的多個元素上的相同ID。這反過來意味着嘗試使用document.getElementById()來選擇那些元素是沒有意義的，因爲該方法返回單個元素（或null） - 那麼它將如何知道您的意思？

到現有代碼的最小變化來得到它的工作將是被點擊項目的值傳遞給你的函數：

<input type="radio" name="stateGov" value="yes" class="choice" 
     onClick="stateGovOptions(this.value)"/> 
<label>No</label> 
<input type="radio" name="stateGov" value="no" class="choice" 
     onClick="stateGovOptions(this.value)"/>

...然後使用它是這樣的：

function stateGovOptions(val) 
{ 
    if(val == 'yes') 
     document.getElementById('stateOptions').setAttribute('style','visibility:visible'); 
    else 
     document.getElementById('stateOptions').setAttribute('style','visibility:hidden'); 
}

演示：http://jsfiddle.net/ryxCM/

需要注意的是，通常人們不會覆蓋整個style屬性來設置一個屬性，一個將只設置道具erty問題：

document.getElementById('stateOptions').style.visibility = 'visible';

演示：http://jsfiddle.net/ryxCM/1/

來源

2013-10-06 05:54:55 nnnnnn

謝謝..得到它...！ – qre0ct

嗨，只要js與HTML內聯（在頭部）就可以工作。但是，如果我將js移動到不同的位置，並嘗試使用

去除重複的ID

document.getElementById('stateOptions').style.visibility=document.getElementsByName('stategov')[0].checked?"visible":"hidden";

後，試試這個，您可能需要使用顯示塊/無人不具備DIV佔用任何空間

來源

2013-10-06 05:53:07 mplungjan

確定，但有什麼錯我的代碼？ – qre0ct

重複的ID。我現在使用名稱，而不是 – mplungjan

你甚至需要JS這個？

解開元素可以讓你用純CSS做到這一點。

Codepen Example

CSS

#stategov1 ~ #stateOptions { 
    visibility:hidden; 
} 

#stategov1:checked ~ #stateOptions { 
    visibility:visible; 
}

HTML

<form>For State govt. Ex- Employee 
    <span class="small">Select if you are a state govt. ex-employee</span> 

    <label>Yes</label> 
    <input type="radio" name="stateGov" id="stategov1" value="yes" class="choice"/> 
    <label>No</label> 
    <input type="radio" name="stateGov" id="stategov2" value="no" class="choice"/> 


    <!-- State govt. ex- employees --> 
    <div id="stateOptions"> 
    <label> 
     <span class="small">Select </span> 
    </label> 

    <select title="stateGovExEmp" name="stateGovExEmp" id="fdivision"> 
     <option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option> 
     <option value="less">Less than or equal to one year</option> 
     <option value="between">More then one but less than two years</option> 
     <option value="more">More than two years</option> 
    </select> 

    </div> 
</form>

然後，它的基本造型的問題

來源

2013-10-06 08:38:10

非常真實，但我對CSS不太舒服。因此JS。實際上，即使在這裏，CSS也是這樣做的，但我仍然希望儘可能少地使用它。 – qre0ct

聰明。從ie7上https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors#Browser_compatibility – mplungjan

真的很簡單的答案。它是如何工作的？ –

試試這個

function stateGovOptions(){ 
if(document.getElementById('stategov').value =='yes') 
    document.getElementById('stateOptions').setAttribute('style','visibility:visible'); 
else   
    document.getElementById('stateOptions').setAttribute('style', 'display:none'); 
}

來源

2014-07-08 07:26:55 user3489146

-1

ById('stategovfunction stateGovOptions(){ 
    if(document.getElementById('stategov').value =='yes') 
     document.getElementById('stateOptions').setAttribute('style','visibility:visible'); 
    else

來源

2016-04-19 10:27:45 asa

請格式化您的代碼並描述做了什麼。 – danopz

相關問題

風格的知名度和javascript

回答

相關問題