user3785322 user3785322 - 1 month ago 16
jQuery Question

Fieldset with changing legend text

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. If i select radionbutton2 it should change legend text to Station2 and show showS2 checkbox.

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

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