Javascript 条件 - 取消选中隐藏 div 中的单选按钮？

Question

I'm trying to set up a conditional type radio button for a form, I actually modified some javascript I found here that looks like this:

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';
    }
}

and the html is like this:

<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

That all works, but if someone clicks Salary and chooses an option and then changes their mind, when they click Flat I'd like to clear any selection they've previously made under Salary (and vice versa) I've tried a couple things that don't work, so I thought I'd ask someone who knows what they're doing. Thanks.

Answer 1

created function clearRadio and assigned it to the radio inputs flat and salary with onchange attribute.

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;
        }
    }
}

the function will find all radio inputs inside the div with the passed id and clear them.

jsfiddle

Answer 2

I'd suggest using a Javascript Library, however I digress. I've modified your code to include an addEvent rather than assigning event handlers in the markup. It just looks cleaner. You can use it either way.

(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;
   }
}

Everything is wrapped in an anonymous function to cut down on globals. The addEvent function allows for cross-browser addition of dynamic event listeners.

This JavaScript corresponds with the following markup:

<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>

I also removed inline styles and made a CSS class called options set to display:none .

.options {
    display:none;
}

jsFiddle

Answer 3

The technique i use is to add a "flag" class (ie dummy class) to the selected option. That gives you the ability to style the selected option and you can easily clear it.

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 } }

Answer 4

I'd suggest:

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 Fiddle demo .

This is, of course, based on slightly amended-HTML, in this case using a class to identify the relevant elements, though a data-* attribute could be used instead.

document.getElementsByClassName() is, sadly, not supported in all browsers, notably Internet Explorer doesn't support it ( according to MDN and Quirksmode ) until version 9.