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。

使用您的 HTML 示例，您可以执行以下操作（请注意，您需要提供<form>一个 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 回答
0

纯 jQuery

$('#switchers input').change(function() {
    var select = $('#s' + $(this).val());
    if ($(this).is(':checked')) {
        select.removeAttr('disabled');
    } else {
        select.attr('disabled', 'disabled');
    }
})

http://jsfiddle.net/8wzd6/

于 2013-07-03T20:06:42.300 回答