如何检查是否选中了<input type =“button”/>？

时间：2018-03-12 19:55:02

标签： javascript

标题是不言自明的，我尝试使用.checked（以及其他一些也失败的方法），但它没有用。

我想知道如何，所以我可以计算一个测验的分数。

以下是它的html部分：

<html>
    <head lang=pt>
       <meta charset="utf-8">
        <title>Formulario</title>
        <link rel="stylesheet" type="text/css" href="quiz1.css">
        <script src=quiz.js></script>
    </head>    
    <body>        
            <form class=formulario onsubmit="return mostrar_placar()"> 
                <h3 id = "pergunta">Qual é o nome do inventor da linguagem de programação Python?<br></h3>
                <input class = "escolhas" id ="0" type="button" value="Guido van Rossum" onclick="keep_highlighted('0')"><br> 
                <input class = "escolhas" id ="1" type="button" value="Dennis Ritchie" onclick="return keep_highlighted('1')"><br> 
                <input class = "escolhas" id ="2" type="button" value="James Gosling" onclick="return keep_highlighted('2')"><br>
                <input class = "escolhas" id ="3" type="button" value="Brendan Eich" onclick="return keep_highlighted('3')"><br>                
                <h3 id = "pergunta">Dentre as alternativas a seguir, qual não é um item de hardware?<br></h3>
                <input class = "escolhas" id ="4" type="button" value="Mouse" onclick="return keep_highlighted('4')"><br> 
                <input class = "escolhas" id ="5" type="button" value="Processador" onclick="return keep_highlighted('5')"><br> 
                <input class = "escolhas" id ="6" type="button" value="Chipset" onclick="return keep_highlighted('6')"><br>
                <input class = "escolhas" id ="7" type="button" value="Debian" onclick="return keep_highlighted('7')"><br><br>                    
                <input type="submit" value="confirmar">
        </form>           
    </body>
</html>

这是js：

var certos = ["0", "7"];


function keep_highlighted(id) {
    document.getElementById(id).style.background = "white";
    document.getElementById(id).style.color = "black";
}

function placar() {
    var placar = 0;
    for (var i = 0; i < 8; i++) {
        console.log(document.getElementById(i.toString()).checked);
        if (document.getElementById(i.toString()).checked) {
            if (document.getElementById(i.toString()).value == certos[i]) {
                placar += 1;
            }
        }
    }
    return placar;

}

function mostrar_placar() {
    alert("Seu placar é " + placar());
}

控制台只打印8个傻瓜，无论我点击什么（显示它从未检查过）。所以它永远不会进入计算分数的条件（没有if（document.getElementById（i.toString（））。checked）它总是在分数上显示2，因为它循环遍历所有按钮，甚至是未选中的按钮）。并且总是将分数显示为0 ....有人可以帮忙吗？

5 个答案:

答案 0 :(得分：0)

  

“啊，我怎么看它是否突出显示......”

您似乎想知道该按钮是否突出显示，这基本上就是说它是“活动”或具有焦点的元素。您可以通过document.activeElement。

获取此信息

这是一个演示，显示主体点击的活动元素变化。

document.body.onclick = function() {
  console.log(document.activeElement);
};
html, body { height: 100%; }
<button>button</button>
<input placeholder="click in here">

但是，您询问的是您的解决方案，而不是完全解释问题。我不知道这与得分测验有什么关系，所以可能你需要一些非常不同的东西。

答案 1 :(得分：0)

无法检查输入按钮＆＃34;在自身。您有几个选项可以解决这个问题。您可以使用单选按钮或复选框按钮将元素更改为表单。但是，如果你想保留按钮，你也可以在单击按钮时使用javascript keep_highlighted方法执行某些操作，例如：

if (document.getElementById(id).classList.contains("checked")) {
    document.getElementById(id).classList.remove("checked");
} else {
    document.getElementById(id).classList.add("checked");
}

你可以得到这个＆＃34;检查＆＃34;按钮使用：

document.getElementsByClassName("checked");

这将切换＆＃34;已检查＆＃34;元素上的类，您可以在其中获取javascript中其他位置的列表，例如您的提交按钮指向的位置

编辑：此外，您可以将按钮样式移动到这些块中，以便您可以切换＆＃34;切换＆＃34;按钮被突出显示或不基于点击它们，用户也可以取消选中＆＃34;选择。

答案 2 :(得分：0)

按钮不应用于表示答案，除非它们是一组选择的一部分。然后，您必须决定是否只允许选择组中的一个项目或是否允许多个项目。这正是复选框和单选按钮的用途。

现在，您不必显示用户复选框或单选按钮 - 您可以向他们显示类似于SELECT R.AcctNbr, X.EffDate, X.IntRate, X.InactiveDate, X.DateLastMaint FROM AcctRateHist X, Rpt_Sort_Process R WHERE X.AcctNbr = R.AcctNbr -- Just some stuff thats needed to get the AcctNbr: Ignore AND R.QueNbr = somenum -- Just some stuff thats needed to get the AcctNbr: Ignore AND R.ApplNbr = somenum -- Just some stuff thats needed to get the AcctNbr: Ignore AND R.QueSubNbr = somenum -- Just some stuff thats needed to get the AcctNbr: Ignore AND X.EffDate = (SELECT EffDate -- This gets the EffDate of 9/14/2017 FROM (SELECT * FROM AcctRateHist X WHERE X.AcctNbr = A.AcctNbr -- R.Acctnbr AND X.EffDate <= TO_DATE('09-26-2017', 'MM-DD-YYYY') -- The date to get the most recent value for ORDER BY X.EffDate DESC, X.DateLastMaint DESC) WHERE ROWNUM = 1) AND ROWNUM = 1 -- This SHOULD return the IntRate of null, but doesn't ORDER BY X.EffDate DESC, X.Datelastmaint DESC; 的内容，但“按钮”需要表现出来或者像复选框或单选按钮。这可以通过实际使用复选框或单选按钮来实现，但隐藏这些，而是​​显示与隐藏项绑定的button元素。

然后，在您的JavaScript中，您可以像往常一样访问实际的复选框和单选按钮。

以下是使用隐藏复选框的示例，以便可以选择多个“按钮”元素：

label
document.getElementById("getChecked").addEventListener("click", function(){
   // Gather up all the checked checkboxes into an Array;
   var checkedCheckboxes =
      Array.prototype.slice.call(document.querySelectorAll("input[type='checkbox']:checked"));
      
   // Set up result array
   var result = [];
   
   // Loop over them and add selected values to array
   checkedCheckboxes.forEach(function(checkbox){
     result.push(checkbox.value); 
   }); 
   
   // Clear old output and log new results
   console.clear();
   console.log(result);
});
/* Hide the checkboxes */
input[type='checkbox'] { display:none; }

/* Default styling for labels to make them look like buttons */
input[type='checkbox'] + label {
  display:inline-block;
  box-shadow:1px 1px grey;
  border-radius:3px;
  background-color:#e0e0e0;
  padding:5px;
  font-family:Arial, Helvetica, sans-serif;
  cursor:pointer;
}

/* Styling for labels when corresponding checkbox is checked */
input[type='checkbox']:checked + label {
  box-shadow:-1px -1px grey;
  background-color:#f78d32;
}

使用单选按钮，只能选择一个“按钮”，几乎完全相同，但HTML使用<input type="checkbox" id="chk1" name="chk1" value="choice 1"> <label for="chk1">Choice 1</label> <input type="checkbox" id="chk2" name="chk2" value="choice 2"> <label for="chk2">Choice 2</label> <input type="checkbox" id="chk3" name="chk3" value="choice 3"> <label for="chk3">Choice 3</label> <p><button id="getChecked">Get the checked checkbox values</button></p>并且CSS和JavaScript选择器更改为查找这些单选按钮。此外，由于只能选择一个单选按钮（在任何给定的组内），因此无需将所有已检查的单选按钮（从一个组）收集到一个数组中。只有一个选中的按钮。

input type=radio
document.getElementById("getChecked").addEventListener("click", function(){
   // Get the one radio button (within its group) that is checked:
   var checkedRadio = document.querySelector("input[type='radio'][name='rad']:checked");
   
   // Clear old output and log new results
   console.clear();
   console.log(checkedRadio.value);
});
/* Hide the checkboxes */
input[type='radio'] { display:none; }

/* Default styling for labels to make them look like buttons */
input[type='radio'] + label {
  display:inline-block;
  box-shadow:1px 1px grey;
  background-color:#e0e0e0;
  padding:5px;
  border-radius:3px;
  font-family:Arial, Helvetica, sans-serif;
  cursor:pointer;
}

/* Styling for labels when corresponding radio button is checked */
input[type='radio']:checked + label {
  box-shadow:-1px -1px grey;
  background-color:#f78d32;
}

答案 3 :(得分：0)

document.getElementById(id).setAttribute("checked","");
document.getElementById(id).removeAttribute("checked");

答案 4 :(得分：-1)

您希望为每个按钮设置“已选中”或“已点击”或“突出显示”等属性。然后单击该按钮时，将其设置为true。然后检查哪些已被点击，循环这些按钮并检查'clicked'是真还是假。

let buttons = document.querySelectorAll('input[type="button"]');

let buttonData = Array.from(buttons).map((el, i) => {
  el.addEventListener('click', ()=>{
    const clicked = !buttonData[i].clicked;
    buttonData[i].clicked = clicked;
    if(clicked){
      el.classList.add('highlighted');
    } else {
      el.classList.remove('highlighted');
    }
  });
  return {element: el, clicked:false}
});

buttonData.forEach((btn, i) => {
  
});

document.getElementById('check-buttons').addEventListener('click', ()=>{
  buttonData.forEach((btn, i) => {
    console.log("button:", btn.element.id, "is highlighted?", btn.clicked);
  });
});
input[type="button"] {
  min-width: 100px;
  display: block;
}
.highlighted {
  background-color: white;
  outline: 2px solid rgba(230,200,100);
}
<input type="button" id="button0" value="button 0">
<input type="button" id="button1" value="button 1">
<input type="button" id="button2" value="button 2">
<input type="button" id="button3" value="button 3">
<br>
<button id="check-buttons"> which buttons are highlighted ?</button>

相关问题
最新问题