具有更改图例文本的字段集答案

【问题标题】：Fieldset with changing legend text具有更改图例文本的字段集
【发布时间】：2020-07-24 01:17:09
【问题描述】：

我在一个页面上有一组单选按钮。每个单选按钮加载不同的复选框集。那么如何根据单选按钮的选择来改变复选框的图例文本。

在下面的代码中，当我单击radiobutton1 时，它将Station1 作为图例加载并显示S1 复选框。如果我选择 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");
            });
     });

【问题讨论】：

你的js代码在哪里？
您应该始终发布完整的代码，并且人们应该能够复制/能够使用它。请考虑发布所有作品

标签： jquery html angularjs

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：