如何从单选按钮中为元素设置属性而不提交

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]