Question

首先，隐藏所有复选框。然后在用户选择收音机后，我想显示与之相关的复选框。我不知道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>

Answer 1

使用纯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 Fiddle demo

但是，这仅限于相当最新的浏览器。

使用jQuery，它就像：

一样简单

我建议：

$('input[type=radio][name=s1]').change(function(){
    var self = this;
    $('#s' + self.value).show();
}).change();

Answer 2

你可以这样做，并且只需要一点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;
}

<强> Demo

如果有这样的jquery会有所帮助：

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

<强> Demo

Answer 3

如果选中单选按钮，您可以使用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 Example - click here

Answer 4

如果您不了解jQuery但想使用它，请尝试使用codeschool并进行免费课程。这真的很棒。

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

Answer 5

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

选择单选按钮后显示可见的复选框

5 个答案:

JS

CSS