如何從單選按鈕中爲元素設置屬性而不提交

Question

我有很多按鈕。如果我被他們的一個點擊調用這個函數：

function addOptions(id) 
{ 
    var button = document.getElementById(id); //clicked button 
    radioDiv = document.querySelector("div.radioDiv"); 
    radioDiv.style.visibility = "visible"; 
    var raz = document.getElementsByName('status'); //get radioButtons 
    $(".radioDiv").ready(function() { 
    $('input[type=radio][name=status]').change(function(){ 

     /*Here I'm trying to set attribute to only one button but 
      here the problem: when I click a few buttons (example: 1st then 2nd, then 3rd) 
      and on 3rd button I choice the "radioButton" this code is set Attribute for 
      all of them (3) */ 

       button.setAttribute("status", this.value); 
      }); 
      }); 
     } 

這裏的index.html。 RadioDiv默認隱藏

<div class="layer1"> 
    <div class="radioDiv"> 
     <input type="radio" value="sale" name="status">111 
     <input type="radio" value="inverted" name="status">222 
    </div> 
    </div> 
    <div class="layer2"></div> 

所以，我需要從RadioButton的值設置按鈕的屬性。

Answer 1

在js文件的開頭使用全局變量。

var lastButton; 
function addOptions(id) { 
    $(".radioDiv input[type=radio][name=status]").prop("checked", false); 
    lastButton = document.getElementById(id); //last clicked button 
    var status = lastButton.getAttribute("status"); 
    $(".radioDiv input[type=radio][name=status][value='" + status +"']").prop("checked", true); 
    $(".radioDiv").prop("visible", true); 
    $('input[type=radio][name=status]').click(function(){ 
    lastButton.setAttribute("status", this.value); 
    }); 
} 

Answer 2

如果你有以下標記：

<div id="status" class="radioDiv"> 
    <input type="radio" value="sale" name="status">111 
    <input type="radio" value="inverted" name="status">222 
</div> 

你可以抓住兩個單選按鈕爲節點列表有：

var statusRadioButtons = document.getElementById('status').getElementsByTagName('input'); 

然後每個按鈕是在一個項目節點列表：

• statusRadioButtons[0]
• statusRadioButtons[1]