Question

我有一个代码可以在每次单击一个单选按钮时显示div，它运行正常。问题是我想要检查所有单选按钮然后div将显示。

这是我的1个单选按钮的代码

function showstuff(nxt){
   document.getElementById(nxtb).style.display="block";
}

<input id="ny" name="ny" type="radio" onClick="document.getElementById('ny').checked =
true; showstuff('nxt');" />

<div id="nxtb">Next</div>

提前致谢

Answer 1

这是一个没有突出的JavaScript（即onclick属性）的解决方案：

/*
 * Convert to array so we can use `forEach()` and `every()`
 */
function toArray(any) {
    return Array.prototype.slice.call(any);
}

var observed = toArray(document.querySelectorAll('[data-observe]'));
var listened = [];
var result = document.querySelector('#result');

/*
 * Gather all elements we want to listen for change:
 * observed elements and their siblings with the same name
 */
observed.forEach(function (target) {
    var siblings = toArray(document.querySelectorAll('[name=' + target.name +']'));
    listened = listened.concat(siblings);
});

listened.forEach(function (radio) {
    radio.addEventListener('change', function () {
        var checked = observed.every(function (item) {
            return item.checked;
        });

        checked ?
            result.removeAttribute('hidden') :
            result.setAttribute('hidden', 'true');
    });
});

演示：http://jsfiddle.net/sZHAA/1/

当选中所有单选按钮时，Javascript显示div

1 个答案: