具有不断变化的图例文本的字段集

Question

I have got a set of radio buttons on a page.我在页面上有一组单选按钮。 Each radio button loads different set of checkboxes.每个单选按钮加载不同的复选框集。 So how to change the legend text of the checkbox based on radio button selection.那么如何根据单选按钮选择更改复选框的图例文本。

In the code below it loads Station1 as legend and showS1 checkbox when i click radiobutton1.在下面的代码中，当我单击 radiobutton1 时，它将 Station1 作为图例加载并显示 S1 复选框。 If i select radionbutton2 it should change legend text to Station2 and show showS2 checkbox.如果我选择 radioonbutton2 它应该将图例文本更改为 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>

EDIT:编辑：

Gave legend an id=A and tried like this.给传奇一个 id=A 并尝试这样。 But its not working.但它不起作用。 Please tell me what i am doing wrong.请告诉我我做错了什么。

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

Answer 1

 $(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(); } }); });

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

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

Answer 2

The legend text can be changed with plane Javascript:可以使用平面 Javascript 更改图例文本：

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

具有不断变化的图例文本的字段集

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-11-04 07:37:59

解决方案2
0 2020-07-23 17:17:09

具有不断变化的图例文本的字段集

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-11-04 07:37:59

解决方案2 0 2020-07-23 17:17:09

解决方案1
1 已采纳 2016-11-04 07:37:59

解决方案2
0 2020-07-23 17:17:09