2

我正在尝试为表单设置条件类型单选按钮，实际上我修改了一些在这里找到的 javascript，如下所示：

function hideStuff(id) {
    document.getElementById('flatDiv').style.display = 'none';
    document.getElementById('salaryDiv').style.display = 'none';
}

function checkType(selectedType) {

    if (selectedType == 'flat') {
        document.getElementById('flatDiv').style.display = 'block';
        document.getElementById('salaryDiv').style.display = 'none';
    } else {
        document.getElementById('flatDiv').style.display = 'none';
        document.getElementById('salaryDiv').style.display = 'block';
    }
}

html是这样的：

<input type="radio" name="Type" value="flat" onclick="checkType(this.value)" />Flat
<input type="radio" name="Type" value="salary" onclick="checkType(this.value)" />Salaray
<br />
<div id="salaryDiv" style="display:none;">Choose an option:
    <input type="radio" name="salaryType" value="1x" />1x
    <input type="radio" name="salaryType" value="2x" />2x
    <input type="radio" name="salaryType" value="3x" />3x</div>
<div id="flatDiv" style="display:none;">Choose an option:
    <input type="radio" name="flatType" value="$25,000" />$25,000
    <input type="radio" name="flatType" value="$50,000" />$50,000</div>

jsFiddle

这一切都有效，但是如果有人点击薪水并选择一个选项然后改变主意，当他们点击平面时，我想清除他们之前在薪水下所做的任何选择（反之亦然）我尝试了几件事这不起作用，所以我想我会问一个知道他们在做什么的人。谢谢。

4

4 回答 4

2

创建函数并将其clearRadio分配给无线电输入flat和属性。salaryonchange

HTML

<input type="radio" name="Type" value="flat" onclick="checkType(this.value)" onchange="clearRadios('flatDiv')" />Flat
    <input type="radio" name="Type" value="salary" onclick="checkType(this.value)" onchange="clearRadios('salaryDiv')" />Salary

JavaScript

function clearRadios(id) {
    var Radios = document.getElementById(id).getElementsByTagName('input');
    for (var i = 0; i < Radios.length; i++) {
        if (Radios[i].type == 'radio') {
            Radios[i].checked = false;
        }
    }
}

该函数将找到 div 内的所有无线电输入id并清除它们。

jsfiddle

于 2013-04-25T23:20:33.907 回答
1

我建议使用 Javascript 库，但是我离题了。我已修改您的代码以在标记中包含addEvent而不是分配事件处理程序。它只是看起来更干净。无论哪种方式，您都可以使用它。

(function () {
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].getAttribute('name') === "Type") {
            addEvent('click', inputs[i], function (e) {
                var source = event.target || event.srcElement;
                checkType(source.value);
            });
        }
    }

    function hideStuff(id) {
        document.getElementById('flatDiv').style.display = 'none';
        document.getElementById('salaryDiv').style.display = 'none';
    }

    // What you had before but now it clears the radios of the other type
    function checkType(selectedType) {
        if (selectedType == 'flat') {
            clear("salaryType");
            document.getElementById('flatDiv').style.display = 'block';
            document.getElementById('salaryDiv').style.display = 'none';
        } else {
            clear("flatType");
            document.getElementById('flatDiv').style.display = 'none';
            document.getElementById('salaryDiv').style.display = 'block';
        }
    }

    function clear(str) {
        for (var i = 0; i < inputs.length;i++) {
            if (inputs[i].getAttribute('name') === str) {
                inputs[i].checked = false;
            }
        }
    }
})(); 
function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem[evnt] = func;
   }
}

一切都包装在一个匿名函数中以减少全局变量。该addEvent函数允许跨浏览器添加动态事件侦听器。

此 JavaScript 对应于以下标记：

<input type="radio" name="Type" value="flat" id="flatRadio" />Flat
<input type="radio" name="Type" value="salary" id="salaryRadio" />Salary
<br />
<div id="salaryDiv" class="options">Choose an option:
    <input type="radio" name="salaryType" value="1x" />1x
    <input type="radio" name="salaryType" value="2x" />2x
    <input type="radio" name="salaryType" value="3x" />3x
</div>
<div id="flatDiv" class="options">Choose an option:
    <input type="radio" name="flatType" value="$25,000" />$25,000
    <input type="radio" name="flatType" value="$50,000" />$50,000
</div>

我还删除了内联样式并创建了一个名为optionsset to的 CSS 类display:none。

.options {
    display:none;
}

jsFiddle

于 2013-04-26T00:18:46.380 回答
0

我使用的技术是向所选选项添加一个“标志”类（即虚拟类）。这使您能够设置所选选项的样式，并且可以轻松清除它。

  1. CSS
#flatDiv, #salaryDiv{display: block;}
.selected{ display: none; }

  1. javascript

    function hideStuff(id) {
  document.getElementById('flatDiv').className ="selected";
  document.getElementById('salaryDiv').className ="selected";
}

function checkType(selectedType){
    var fd = document.getElementById('flatDiv');
  var sd = document.getElementById('salaryDiv');

  if (selectedType == 'flat'){
      fd.className = ""; // clear it
      sd.className = "selected";
  } else{
      fd.className = "selected";
      sd.className = ""; // clear it
  }
}
于 2013-04-25T23:11:39.073 回答
0

我建议：

function hideStuff(elClassName) {
    // call the function to hide specific elements (based on a class-name)
    var els = document.getElementsByClassName(elClassName);
    for (var i = 0, len = els.length; i < len; i++){
        // iterate through those elements and hide them
        els[i].style.display = 'none';
    }
}

function checkType(selectedType) {
    var toggles = document.getElementsByClassName('toggle'),
        inputs;
    for (var i = 0, len = toggles.length; i < len; i++){
        // sets the current node's display to 'block' if the id matches, and 'none' if not
        toggles[i].style.display = toggles[i].id == selectedType + 'Div' ? 'block' : 'none';
        if (toggles[i].style.display == 'none') {
            // if an element is hidden, the radios therein are all unchecked
            inputs = toggles[i].getElementsByTagName('input');
            for (var c = 0, cLen = inputs.length; c < cLen; c++){
                inputs[c].checked = false;
            }
        }
    }
}

hideStuff('toggle');

JS 小提琴演示。

当然，这是基于稍微修改的 HTML，在这种情况下使用类来标识相关元素，尽管data-*可以使用属性来代替。

document.getElementsByClassName()遗憾的是，并非所有浏览器都支持它，尤其是 Internet Explorer直到版本 9 才支持它（根据 MDN和Quirksmode ）。

于 2013-04-25T23:14:57.120 回答