如何在没有提交的情况下从radiobutton设置元素属性

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]