1

まず、すべてのチェックボックスが非表示になります。ユーザーがラジオを選択した後、それに関連するチェックボックスを表示したいと思います。JQuery はわかりませんが、Javascript は知っています。解決策はありますか？

<html><body>
<div id="page">
<div>
<form action="book.php">
<h2><b>Source: </b></h2>
<input type="radio" name="sl"  value="c">Central</input>
<input type="radio" name="sl"  value="h">Eastern</input>
<input type="radio" name="sl" value="w">Western</input>
</br></br>


<select id="sc">
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="sh">
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="sw">
<option value="1">1</option>
<option value="2">2</option>
</select>


</form>
</div>
</body>
</html>
4

5 に答える 5

0

プレーンな JavaScript を使用すると、次のことをお勧めします。

function showSelects (radio) {
    var id = 's' + radio.value,
        curActive = document.querySelector('select.active'),
        target = document.getElementById(id);
    if (curActive !== null) {
        curActive.classList.remove('active');
    }
    target.classList.add('active');
}

var radios = document.querySelectorAll('input[type=radio][name=sl]');
for (var i = 0, len = radios.length; i < len; i++) {
    radios[i].addEventListener('change', function(){
        showSelects(this);
    });
}

上記には、次の CSS が必要です。

select {
    display: none;
}

select.active {
    display: block;
}

JS フィドルのデモ。

ただし、これはかなり最新のブラウザに限定されています。

jQuery を使用すると、次のように簡単になります。

私はお勧めします：

$('input[type=radio][name=s1]').change(function(){
    var self = this;
    $('#s' + self.value).show();
}).change();
于 2013-07-03T19:51:23.457 に答える
0

この方法で、少しの css を使用して行うことができます。

JS

window.onload = function () {
    var allElem = document.getElementsByName("sl");
    for (i = 0; i < allElem.length; i++) {
        allElem[i].addEventListener('change', toggleDisplay); //register event to the radio button.
    }

}

function toggleDisplay(e) {
   var id = 's' + this.value; //get the value caculate the id of the target element.
    var currentSelect = document.getElementsByClassName("active")[0]; //remove currently active select
    if (currentSelect) {
        currentSelect.className = "";
    }
    document.getElementById(id).className = "active"; //set active classname to the new target
}

CSS

form select {
    display:none;
}
form select.active {
    display:block;
}

デモ

jqueryの場合、これが役立ちます：

$(function () {
    $('[name="sl"]').change(function () {
        var target = '#s' + this.value;
        $(target).show().siblings('select').hide();
    })
});

デモ

于 2013-07-03T19:56:28.903 に答える
0

ラジオボタンがチェックされている場合、jQuery を使用して ID を表示/非表示にすることができます。

<form>HTMLの例を使用すると、次のようなことができます（ IDを指定する必要があることに注意してください。ここでは次を使用していform-idます：

$('#form-id').change(function() {
    if ($('#one').prop('checked')) {
        $('#sc').show();
    } else {
        $('#sc').hide();
    }
});

さらに、CSS を次のようにする必要があります。

#sc,#sh,#sw { display: none;}

JSFiddle の例 - ここをクリック

于 2013-07-03T19:58:37.557 に答える
0

jQuery を知らなくても使いたい場合は、codeschool に行って無料のコースを受講してみてください。それは本当に良いです。

純粋な Javascript:

var radios = document.getElementsByName("sl");

var selects = [];
selects.push(document.getElementById("sc"));
selects.push(document.getElementById("sh"));
selects.push(document.getElementById("sw"));

for (i=0;i<radios.length;i++) {
  radios[i].onclick = function(){
    for (j=0;j<selects.length;j++) {
      selects[j].style.display = "none";
    }
    document.getElementById("s"+radios[i].value).style.display = 'block';
  };
}

http://jsfiddle.net/h2CMH/

于 2013-07-03T20:00:24.070 に答える