Question

我在页面上有一组单选按钮。每个单选按钮都会加载不同的复选框。因此，如何根据单选按钮选择更改复选框的图例文本。

在下面的代码中，当我点击radiobutton1时，它会将Station1作为图例加载并显示showS1复选框。如果我选择radionbutton2，它应该将图例文本更改为Station2并显示showS2复选框。

<html>
  <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

     <link href="static/css/app.css" rel="stylesheet"></link>
    </head>
<body ng-app="app" class="ng-cloak">

<div class="generic-container" ng-controller="GController as ctrl">

    <form class="form-inline">
    <fieldset class="scheduler-border">
    <legend class="scheduler-border">Select Station</legend>

    <div class="form-group">

    <label class="radio-inline" >
    <input id="inlineradio1" name="sampleinlineradio" value="showS1" type="radio" ng-model="radioption">
                Station 1</label>

    <label class="radio-inline">
    <input id="inlineradio2" name="sampleinlineradio" value="showS2" type="radio" ng-model="radioption" >
                Station 2</label>
    </div>       
    </fieldset>
    </form>

    <form class="form-inline">
    <div class="form-group">
    <fieldset class="scheduler-border">
    <legend class="scheduler-border">Station 1</legend>

    <div ng-show="radioption == 'showS1'">
    <label class="radio-inline">
    <input id="cb1" type="checkbox" name="cboption" ng-model="checkboxption" value="cb1show">
            BRW</label> 
    </div>

    <div ng-show="radioption == 'showS2'">
    <label class="radio-inline">
    <input id="cb2" type="checkbox" name="cboption" ng-model="checkboxption" value="cb2show">
        LCBD</label> 
    </div>
    </fieldset>
    </form>
    </div>
</body>
</html>

修改

给传说一个id = A并尝试这样。但它不起作用。请告诉我我做错了什么。

$(document).ready(function(){
            $("#inlineradio1").click(function(){
                 $("#A").html("Station 1");
            });
     });
 $(document).ready(function(){
            $("#inlineradio2").click(function(){
                 $("#A").html("Station 2");
            });
     });

Answer 1

＆＃13;

$(document).ready(function(){
    $('input[name="sampleinlineradio"]').click(function(){
        if($(this).attr("value")=="showS1"){
        $('.scheduler-s1, .station_brw').show();
        $('.scheduler-s2, .station_lcbd').hide();
        }
        if($(this).attr("value")=="showS2"){
        $('.scheduler-s1, .station_brw').hide();
        $('.scheduler-s2, .station_lcbd').show();
        }
    });
});

＆＃13;

.station_lcbd, .scheduler-s2{
  display: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body ng-app="app" class="ng-cloak">

<div class="generic-container" ng-controller="GController as ctrl">

    <form class="form-inline">
    <fieldset class="scheduler-border">
    <legend class="scheduler-border">Select Station</legend>

    <div class="form-group">

    <label class="radio-inline" >
    <input id="inlineradio1" name="sampleinlineradio" value="showS1" type="radio" ng-model="radioption">
                Station 1</label>

    <label class="radio-inline">
    <input id="inlineradio2" name="sampleinlineradio" value="showS2" type="radio" ng-model="radioption" >
                Station 2</label>
    </div>       
    </fieldset>
    </form>

    <form class="form-inline">
    <div class="form-group">
    <fieldset class="scheduler-border">
    <legend class="scheduler-s1">Station 1</legend>
    <legend class="scheduler-s2">Station 2</legend>

    <div ng-show="radioption == 'showS1'" class="station_brw">
    <label class="radio-inline">
    <input id="cb1" type="checkbox" name="cboption" ng-model="checkboxption" value="cb1show">
            BRW</label> 
    </div>

    <div ng-show="radioption == 'showS2'" class="station_lcbd">
    <label class="radio-inline">
    <input id="cb2" type="checkbox" name="cboption" ng-model="checkboxption" value="cb2show">
        LCBD</label> 
    </div>
    </fieldset>
    </div>
    </form>
    </div>
</body>

＆＃13;

Answer 2

可以使用平面Javascript更改图例文本：

var yourlegend = document.getElementById("A");
yourlegend .innerHTML = "Your Text";

带有更改图例文本的Fieldset

2 个答案: