我試圖實現一個計劃頁面。在這個頁面中，用戶顯然只能選擇一個計劃。所以我有一個表單，它具有代表每個計劃的單選按鈕。但單選按鈕很醜陋！所以我試圖把它們隱藏在一個很好的常規href後面。有可能有一個href實際上代表它選擇一個單選按鈕嗎？這裏是我的代碼：點擊一個href選擇隱藏的單選按鈕

HTML：

<label class="plans__trial__actions"> 
    <input type="radio" id="trial" name="slug" value="trial" /> 
    <a href="#" class="button" id="free">Select</a> 
    </label>

所以對於單選按鈕我使用display: none;隱藏單選按鈕，然後試圖選擇按鈕，當用戶單擊一個HREF，下面的單選按鈕。我怎樣才能做到這一點？

來源

2017-04-12 Bitwise

*「但單選按鈕很難看！」 - - 沒有。 – nnnnnn

我不是前端人，所以我問的問題。但我從來沒有見過漂亮的單選按鈕。但我確定他們在那裏。 – Bitwise

是的，我的評論不是很有建設性。無論如何，你能否請你的問題顯示單選按鈕的實際HTML而不是服務器端的'<%= %>'代碼 - 如果他們只能複製你的HTML，那麼人們可以更容易地在他們的答案中包含演示。還要注意的是，只要點擊標籤就可以選擇與其關聯的單選按鈕，您可以對標籤進行樣式設置而不是添加錨點。 – nnnnnn

您可以添加一個類到所有複選框示例檢查。看看你的html的結構，如果輸入的兄弟是在錨標籤旁邊，你可以爲所有的錨添加一個click事件。當事件觸發時，錨會檢查他們的兄弟複選框。下面

片段沒有隱藏

all_anchor=document.getElementsByClassName("button"); 
 
for(var x=0;x<all_anchor.length;++x){ 
 
all_anchor[x].addEventListener("click",function(){ 
 
this.previousElementSibling.checked=true; 
 
}) 
 
}

a{ 
 
padding:30px; 
 
background:red; 
 
border:solid red; 
 
border-radius:10px; 
 
text-decoration:none; 
 
}

<label class="plans__trial__actions"> 
 
    <input type="radio" id="trial" name="slug1" value="trial" class="check"/> 
 
    <a href="#" class="button" id="free">Select</a> 
 
    </label> 
 
<label class="plans__trial__actions"> 
 
    <input type="radio" id="trial" name="slug2" value="trial" class="check"/> 
 
    <a href="#" class="button" id="free">Select</a> 
 
    </label> 
 
<label class="plans__trial__actions"> 
 
    <input type="radio" id="trial" name="slug3" value="trial" class="check"/> 
 
    <a href="#" class="button" id="free">Select</a> 
 
    </label>

片段複選框下方，所有的輸入框是隱藏的，而是由錨標記

all_anchor = document.getElementsByClassName("button"); 
 
for (var x = 0; x < all_anchor.length; ++x) { 
 
    all_anchor[x].addEventListener("click", function() { 
 
    this.previousElementSibling.checked = true; 
 
    console.log("input sibling is checked") 
 
    }) 
 
}

a { 
 
    padding: 30px; 
 
    background: red; 
 
    border: solid red; 
 
    border-radius: 10px; 
 
    text-decoration: none; 
 
} 
 

 
.check { 
 
    display: none; 
 
}

<label class="plans__trial__actions"> 
 
    <input type="radio" id="trial" name="slug1" value="trial" class="check"/> 
 
    <a href="#" class="button" id="free">Select</a> 
 
    </label> 
 
<label class="plans__trial__actions"> 
 
    <input type="radio" id="trial" name="slug2" value="trial" class="check"/> 
 
    <a href="#" class="button" id="free">Select</a> 
 
    </label> 
 
<label class="plans__trial__actions"> 
 
    <input type="radio" id="trial" name="slug3" value="trial" class="check"/> 
 
    <a href="#" class="button" id="free">Select</a> 
 
    </label>

檢查210

來源

2017-04-12 03:11:38 repzero

點擊一個href選擇隱藏的單選按鈕

HTML：

回答

相關問題