改變圖例文字的字段集

-1

我在頁面上有一組單選按鈕。每個單選按鈕加載不同的複選框。那麼如何根據單選按鈕選擇來更改複選框的圖例文本。改變圖例文字的字段集

在下面的代碼中，當我單擊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"); 
      }); 
    });

來源

2016-11-04 user3785322

哪裏是你的js代碼？ – Jigar7521

你應該總是發佈完整的代碼，人們應該能夠重現/能夠使用它。請考慮發佈所有的作品 – Sreekanth

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

來源

2016-11-04 07:37:59 Venkatachalam

改變圖例文字的字段集

回答

相關問題