JavaScript - 如果选中了复选框，请选择单选按钮 [英] JavaScript - Select radio button if any checkbox is checked

问题描述

以下是HTML代码：

$

b
$ b

 < form> 
< h3>电台按钮< / h3> 
< input type =radioname =radio1id =radio1>电台1 
< br> 
< input type =radioname =radio2id =radio2>收音机2 
< br> 
< br> 
 
< h3>复选框组< / h3> 
 
< h4>< u>群组1< / u>< / h4> 
< p align =center>< u> PD< / u>< / p> 
< ul> 
< li> 
< input id =pdcbtype =checkboxname =G1PD1onclick =validate（）> G1 PD1< / li> 
< li> 
< input id =pdcbtype =checkboxname =G1PD2onclick =validate（）> G1 PD2< / li> 
< / ul> 
< p align =center>< u> ID< / u>< / p> 
< ul> 
< li> 
< input id =idcbtype =checkboxname =G1ID1onclick =validate（）> G1 ID1< / li> 
< li> 
< input id =idcbtype =checkboxname =G1ID2onclick =validate（）> G1 ID2< / li> 
< / ul> 
 
< h4>< u>群组2< / u>< / h4& 
< p align =center>< u> PD< / u>< / p> 
< ul> 
< li> 
< input id =pdcbtype =checkboxname =G2PD1onclick =validate（）> G2 PD1< / li> 
< li> 
< input id =pdcbtype =checkboxname =G2PD2onclick =validate（）> G2 PD2< / li> 
< / ul> 
< p align =center>< u> ID< / u>< / p> 
< ul> 
< li> 
< input id =idcbtype =checkboxname =G2ID1onclick =validate（）> G2 ID1< / li> 
< li> 
< input id =idcbtype =checkboxname =G2ID2onclick =validate（）> G2 ID2< / li> 
< / ul> 
< / form> 
  

所以这里是我想让JavaScript做的：如果任何 PD 复选框，则应选择单选按钮收音机1 。如果未选择 PD 复选框，则应选择单选按钮收音机2 。同样，如果没有选择任何复选框，则应选择NONE的单选按钮。

到目前为止，我写了以下JS代码：

  function validate（）
 {
 if（document.getElementById（pdcb）。checked）// if pdcb复选框（es）被选中
 {
 document.getElementById（radio1）。checked = true; 
 document.getElementById（radio2）。checked = false; 
} 
 else if（！document.getElementById（pdcb）。checked）//如果没有检查pdcb复选框是否被选中
 {
 document。 getElementById（radio1）。checked = false; 
 document.getElementById（radio2）。checked = true; 
} 
 else //如果没有选中复选框，则不填充任何单选按钮
 {
 document.getElementById（radio1）。 
 document.getElementById（radio2）。checked = false; 
} 
 
} 
  

PS：代码是纯JavaScript。我不能使用jQuery

编辑：
对于我的要求错误，我深表歉意。但这是正确的要求。如果选中了 PD 复选框中的任何一个，则应选择单选按钮收音机1 。如果未选择 PD 复选框，则应选择单选按钮收音机2 。同样，如果没有选择任何复选框，则应选择NONE个单选按钮。

任何人都可以帮我到这里？

提前感谢！

解决方案

我想首先指出， JSFiddle，对于您的内联 onclick 活动， LOAD TYPE 需要设置为无换行。

现在，到你的代码。文档元素可以绑定到类或 ID 。类用于当您使用共享相同功能，样式等的元素时。 ID仅用于唯一元素和唯一元素。例如，在您的JavaScript中，当您尝试使用

测试检查 pdcb 元素时

document.getElementById（pdcb）。checked

JavaScript简单地抓取页面上 pdcb 的I​​D。您有四个具有此ID名称的元素;这意味着最后三个 pdcb 元素被忽略，从不评估。

  document.getElementsByClassName（pdcb）
  

请注意单词'Element'的复数形式。这是做什么的，它返回一个所有元素的类名为 pdcb 的数组。我们会得到一个事实，我们在几分钟内处理一个数组。首先，我们将大部分的HTML ID更改为类。

 < ul& 
< li> 
< input class =pdcbtype =checkboxname =G1PD1onclick =validate（）> G1 PD1< / li> 
< li> 
< input class =pdcbtype =checkboxname =G1PD2onclick =validate（）> G1 PD2< / li> 
< / ul> 
  

您将要对所有 pdcb 和 idcb 元素。随时保留 radio1 和 radio2 为 ID 因为它们是唯一的元素，不能像 pdcb 和 idcb 一样重用。

---

现在我们可以解决JavaScript;你的HTML很好，从这里假设你从上面做了必要的更改。因为我们将ID从ID改为类，所以下面的表达式根本不会做。

document.getElementById（pdcb）

回忆我之前写的解决方案：

.getElementsByClassName（pdcb）

还记得我说这会返回一个元素数组;在你的情况下，四个 pdcb 元素。

你有一个选项，您可以遍历 document.getElementsByClassName（pdcb）返回的元素数组，以评估是否有任何 pdcb 已检查。它看起来像这样：

  var pdcbClass = document.getElementsByClassName（pdcb）; 
 
 //对于HTML文档中的每个pdcb类
 for（var i = 0; i  if（pdcbClass [i]。 checked == true）{
 //接下来的两行直接来自你的JavaScript代码
 document.getElementById（radio1）。checked = true; 
 document.getElementById（radio2）。checked = false; 
} 
} 
  

你可以想象，在页面上的 idcb 类元素的想法。当我们完成时，我们应该有类似下面的内容。

  function validate（）
 {
 var pdcbClass = document.getElementsByClassName（pdcb）; 
 var idcbClass = document.getElementsByClassName（idcb）; 
 console.log（this）; 
 for（var i = 0; i< pdcbClass.length; i ++）{
 if（pdcbClass [i] .checked == true）{
 document.getElementById（radio1） .checked = true; 
 document.getElementById（radio2）。checked = false; 
} 
} 
 
 for（var i = 0; i  if（idcbClass [i] .checked == true ）{
 document.getElementById（radio1）。checked = false; 
 document.getElementById（radio2）。checked = true; 
} 
} 
} 
  

但有一个问题！不管这个 validate（）函数触发了什么复选框，任何复选框都不会关闭。这意味着如果我们用 pdcb 类检查一个框，然后用 idcb 类检查一个框， c $ c> pdcb 框仍然保持选中状态;我们从来没有说过取消它。这意味着，即使是触发 validate（）的 idcb 点击，函数中的代码已执行。或者你必须让用户手动取消选中前面的框，然后再检查一个新的框，或者你需要写一些代码做同样的事情。具体来说，当选中新的复选框时，您需要清除检查属性的上一个框。

这是一个完全不同的问题，值得一个不同的问题。还要考虑这不是写这个事件/功能的唯一方法，但是你取得了很好的进展。

这里基本上是你需要继续前进的代码。

https://jsfiddle.net/a4k9xggu/

I'm trying to write JavaScript code where a radio button should be populated if a checkbox is checked.

Following is the HTML code:

<form>
   <h3>Radio Buttons</h3>
   <input type="radio" name="radio1" id="radio1"> Radio 1
   <br>
   <input type="radio" name="radio2" id="radio2">Radio 2
   <br>
   <br>

   <h3>Checkbox Groups</h3>

   <h4><u>Group 1</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
         <input id="pdcb" type="checkbox" name="G1PD1" onclick="validate()">G1 PD1</li>
      <li>
         <input id="pdcb" type="checkbox" name="G1PD2" onclick="validate()">G1 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input id="idcb" type="checkbox" name="G1ID1" onclick="validate()">G1 ID1</li>
      <li>
         <input id="idcb" type="checkbox" name="G1ID2" onclick="validate()">G1 ID2</li>
   </ul>

   <h4><u>Group 2</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
         <input id="pdcb" type="checkbox" name="G2PD1" onclick="validate()">G2 PD1</li>
      <li>
         <input id="pdcb" type="checkbox" name="G2PD2" onclick="validate()">G2 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input id="idcb" type="checkbox" name="G2ID1" onclick="validate()">G2 ID1</li>
      <li>
         <input id="idcb" type="checkbox" name="G2ID2" onclick="validate()">G2 ID2</li>
   </ul>
</form>

So here's what I want the JavaScript to do: If any of the PD checkboxes are selected, then the radio button Radio 1 should get selected. If none of the PD checkboxes are selected, then the radio button Radio 2 should get selected. Similarly, if none of the checkboxes are selected, then NONE of the radio buttons should get selected.

So far, I've written the following JS code:

function validate()
{
    if(document.getElementById("pdcb").checked) //if pdcb checkbox(es) is/are checked
  { 
    document.getElementById("radio1").checked = true;
    document.getElementById("radio2").checked = false;
  }  
  else if (!document.getElementById("pdcb").checked) //if none of the pdcb checkbox(es) is/are checked
  { 
    document.getElementById("radio1").checked = false;
    document.getElementById("radio2").checked = true;
  }
  else //if no checkbox is checked, then don't populate any radio button
  {
    document.getElementById("radio1").checked = false;
    document.getElementById("radio2").checked = false;
  }

}

PS: I need the code to be in pure JavaScript. I can't use jQuery

EDIT: I apologize for getting my requirements wrong. But here's the correct requirement. If any of the PD checkboxes are selected, then the radio button Radio 1 should get selected. If none of the PD checkboxes are selected, then the radio button Radio 2 should get selected. Similarly, if none of the checkboxes are selected, then NONE of the radio buttons should get selected.

Could anyone help me out here?

Thanks in advance!

解决方案

I want to first point out that if you were testing this in a JSFiddle, the LOAD TYPE needs to be set to "No Wrap-in " for your inline onclick events to work.

Now, to your code. Document elements can either be tied to a class or ID. Classes are for when you're using elements that share the same functionality, styling, etc.; ID's are for unique elements and unique elements only. For example, in your JavaScript, when you try to test for checked pdcb elements with

document.getElementById("pdcb").checked

JavaScript simply grabs the first element on the page with the ID of pdcb. You have four elements with this ID name; this means that the last three pdcb elements are ignored and never evaluated.

Instead, let's utilize

document.getElementsByClassName("pdcb")

Note the plural form of the word 'Element'. What this does is it returns an array of all elements with the class name of pdcb. We'll get to the fact that we're dealing with an array in a few minutes. First, let's change most of your HTML ID's to classes.

<ul>
   <li>
      <input class="pdcb" type="checkbox" name="G1PD1" onclick="validate()">G1 PD1</li>
   <li>
      <input class="pdcb" type="checkbox" name="G1PD2" onclick="validate()">G1 PD2</li>
</ul>

You're going to want to do this for all of your pdcb and idcb elements. Feel free to preserve radio1 and radio2 as ID's because they're unique elements, not reused like pdcb and idcb are.

---

Now we can address the JavaScript; you're HTML is fine from here assuming you've made the changes necessary from above. Since we changed things from ID's to classes, expressions like the following simply won't do.

document.getElementById("pdcb")

Recall the solution that I wrote earlier:

document.getElementsByClassName("pdcb")

Also recall that I said that this will return an array of elements; in your case, four pdcb elements.

One option that you have at your disposal for tackling this problem is that you can iterate through the array of elements returned by document.getElementsByClassName("pdcb") to evaluate whether any pdcb class has been checked. It'll look something like this:

var pdcbClass = document.getElementsByClassName("pdcb");

    //for each pdcb class on our HTML document
    for (var i = 0; i < pdcbClass.length; i++) {
       if (pdcbClass[i].checked == true) {
          //the next two lines are straight from your JavaScript code
          document.getElementById("radio1").checked = true;
          document.getElementById("radio2").checked = false;
        }
    }

As you can imagine, we can use the exact same idea for the idcb class elements on your page. By the time we're done, we should have something like what you see below.

function validate()
{
  var pdcbClass = document.getElementsByClassName("pdcb");
  var idcbClass = document.getElementsByClassName("idcb");
  console.log(this);
    for (var i = 0; i < pdcbClass.length; i++) {
    if (pdcbClass[i].checked == true) {
       document.getElementById("radio1").checked = true;
         document.getElementById("radio2").checked = false;
    }
  }

  for (var i = 0; i < idcbClass.length; i++) {
    if (idcbClass[i].checked == true) {
      document.getElementById("radio1").checked = false;
      document.getElementById("radio2").checked = true;
    }
  }
}

But there's a problem! No matter what check box fires off this validate() function, no check box is ever turned off. That means if we check a box with the pdcb class and then check a box with the idcb class, the pdcb box still stays checked; we never said to uncheck it. What this means is that even though it was an idcb click that triggered validate(), all of the code in the function gets executed. Either you have to have the user manually uncheck the previous box before checking a new one, or you need to write some code that does this same thing. Specifically, when a new check box is checked, you need to clear the previous box(es) of their checked property.

That is an entirely different problem and merits a different question. Also consider that this isn't the only way to write this event/functionality, but you're making good progress.

Here's essentially the code you need to keep on going.

https://jsfiddle.net/a4k9xggu/

这篇关于JavaScript - 如果选中了复选框，请选择单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！