1

ラジオボタンをクリックするたびに 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>

前もって感謝します

4

1 に答える 1

0

邪魔な 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/

于 2013-10-24T14:48:00.960 に答える