Добавление атрибута переключения данных в тег привязки, когда установлен переключатель

Question

Когда здесь отмечен переключатель

<fieldset id="group1">
                                        <div class="col-sm-5 col-sm-offset-1">
                                            <div class="form-group label-floating">
                                                <div class="inputGroup">
                                                    <input id="radioA4" name="group1" type="radio"/>
                                                    <label for="radioA4">Demo text</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-group label-floating">
                                                <div class="inputGroup">
                                                    <input id="radioA1" name="group1" type="radio"/>
                                                    <label for="radioA1">
                                                 </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-5 col-sm-offset-1">
                                            <div class="form-group label-floating">
                                                <div class="inputGroup">
                                                    <input id="radioA2" name="group1" type="radio"/>
                                                    <label for="radioA2">Demo</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-group label-floating">
                                                <div class="inputGroup">
                                                    <input id="radioA3"  name="group1" type="radio"/>
                                                    <label for="radioA3">Demo</label>
                                                </div>
                                            </div>
                                        </div>
                                        </fieldset>

Я хочу добавить данные для переключения на эту часть

<li><a href="#facilities" >House Captain</a></li>

так, чтобы это выглядело так

 <li><a href="#facilities" data-toggle="tab">House Captain</a></li>

Это то, что я пытался, но не все работает

 $('input:radio[name="group1"]').change(
    function(){
        if (this.checked) {
           $(".dropdown-toggle").attr("data-toggle", "tab");
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="" method="">
			                <!--        You can switch " data-color="rose" "  with one of the next bright colors: "blue", "green", "orange", "purple"        -->

		                    	<div class="wizard-header">
		                        	<h3 class="wizard-title">
		                        		List Your Place
		                        	</h3>
									<h5>This information will let us know more about your place.</h5>
		                    	</div>
								<div class="wizard-navigation" id="tabs" >
									<ul>
			                            <li><a href="#location" data-toggle="tab" >Head Boy</a></li>
			                            <li><a id="tab2" href="#type" class="dropdown-toggle">Head Girl</a></li>
			                            <li><a href="#facilities" >House Captain</a></li>
			                            <li><a href="#description">Asst. House Captain</a></li>

			                        </ul>
								</div>

		                        <div class="tab-content">
		                            <div class="tab-pane" id="location">
		                            	<div class="row">
                                            <fieldset id="group1">
		                                	<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioA4" name="group1" type="radio" />
                                                        <label for="radioA4">Demo text</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioA1" name="group1" type="radio"/>
                                                        <label for="radioA1">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioA2" name="group1" type="radio"/>
                                                        <label for="radioA2">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioA3"  name="group1" type="radio"/>
                                                        <label for="radioA3">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            </fieldset>
                                        </div>
		                            </div>
		                            <div class="tab-pane" id="type">
		                               <div class="row">
                                            <fieldset id="group2">
		                                	<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioB4"  name="group2" type="radio"/>
                                                            <label for="radioB4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text2</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioB1" name="group2" type="radio"/>
                                                        <label for="radioB1">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioB2" name="group2" type="radio"/>
                                                        <label for="radioB2">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioB3" name="group2" type="radio"/>
                                                        <label for="radioB3">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            </fieldset>
                                        </div>

		                            </div>
		                            <div class="tab-pane" id="facilities">
                                        <div class="row">
                                            <fieldset id="group3">
		                                	<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioC4" name="group3" type="radio"/>
                                                            <label for="radioC4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioC1" name="group3" type="radio"/>
                                                        <label for="radioC1">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioC2" name="group3" type="radio"/>
                                                        <label for="radioC2">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioC3"  name="group3" type="radio"/>
                                                        <label for="radioC3">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            </fieldset>
                                        </div>
		                            </div>
		                            <div class="tab-pane" id="description">
		                                <div class="row">
                                            <fieldset id="group4">
		                                	<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioD4" name="group4" type="radio"/>
                                                        <label for="radioD4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioD1" name="group4" type="radio"/>
                                                        <label for="radioD1">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioD2" name="group4" type="radio"/>
                                                        <label for="radioD2">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            <div class="col-sm-5">
		                                    	<div class="form-group label-floating">
		                                        	<div class="inputGroup">
                                                        <input id="radioD3"  name="group4" type="radio"/>
                                                        <label for="radioD3">S.Prasanna Venkatesh</label>
                                                    </div>
		                                    	</div>
		                                	</div>
                                            </fieldset>
                                        </div>
		                            </div>
		                        </div>
		                        <div class="wizard-footer">
	                            	<div class="pull-right">
	                                    <input id="next" type='button' class='btn btn-next btn-fill btn-primary btn-wd' name='next' value='Next' />
	                                    <input type='button' class='btn btn-finish btn-fill btn-primary btn-wd' name='finish' value='Finish' />
	                                </div>
	                                <div class="pull-left">
	                                    <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
	                                </div>
		                            <div class="clearfix"></div>
		                        </div>
			                </form>

Пожалуйста, помогите

Answer 1

Простое решение, как показано ниже

 $('input:radio[name="group1"]').change(
    function(){
        if (this.checked) {
          var elm = document.getElementById("drp");
          console.log(elm)
          elm.setAttribute("data-owner-name", "someName");


        }
    });

https://jsfiddle.net/afsykb45/

Answer 2

Я думаю, что вы ищете это. Скажите, если я ошибаюсь.

Просто добавьте идентификатор к каждому <a> и используйте функцию ниже для добавления атрибута.

РЕДАКТИРУЕТСЯ ДЛЯ ПОДКЛЮЧЕНИЯ КАЖДОГО РАДИО И НАЗВАНИЯ:

$('input:radio').click(evt => $("#tab"+evt.target.name).attr("data-toggle", "tab"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="" method="">
  <!--        You can switch " data-color="rose" "  with one of the next bright colors: "blue", "green", "orange", "purple"        -->

  <div class="wizard-header">
    <h3 class="wizard-title">
      List Your Place
    </h3>
    <h5>This information will let us know more about your place.</h5>
  </div>
  <div class="wizard-navigation" id="tabs">
    <ul>
      <li><a id="tabgroup1" href="#location">Head Boy</a></li>
      <li><a id="tabgroup2" href="#type" class="dropdown-toggle">Head Girl</a></li>
      <li><a id="tabgroup3" href="#facilities">House Captain</a></li>
      <li><a id="tabgroup4" href="#description">Asst. House Captain</a></li>

    </ul>
  </div>

  <div class="tab-content">
    <div class="tab-pane" id="location">
      <div class="row">
        <fieldset id="group1">
          <div class="col-sm-5 col-sm-offset-1">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioA4" name="group1" type="radio" />
                <label for="radioA4">Demo text</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioA1" name="group1" type="radio" />
                <label for="radioA1">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5 col-sm-offset-1">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioA2" name="group1" type="radio" />
                <label for="radioA2">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioA3" name="group1" type="radio" />
                <label for="radioA3">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="tab-pane" id="type">
      <div class="row">
        <fieldset id="group2">
          <div class="col-sm-5 col-sm-offset-1">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioB4" name="group2" type="radio" />
                <label for="radioB4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text2</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioB1" name="group2" type="radio" />
                <label for="radioB1">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5 col-sm-offset-1">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioB2" name="group2" type="radio" />
                <label for="radioB2">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioB3" name="group2" type="radio" />
                <label for="radioB3">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
        </fieldset>
      </div>

    </div>
    <div class="tab-pane" id="facilities">
      <div class="row">
        <fieldset id="group3">
          <div class="col-sm-5 col-sm-offset-1">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioC4" name="group3" type="radio" />
                <label for="radioC4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioC1" name="group3" type="radio" />
                <label for="radioC1">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5 col-sm-offset-1">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioC2" name="group3" type="radio" />
                <label for="radioC2">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioC3" name="group3" type="radio" />
                <label for="radioC3">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="tab-pane" id="description">
      <div class="row">
        <fieldset id="group4">
          <div class="col-sm-5 col-sm-offset-1">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioD4" name="group4" type="radio" />
                <label for="radioD4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioD1" name="group4" type="radio" />
                <label for="radioD1">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5 col-sm-offset-1">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioD2" name="group4" type="radio" />
                <label for="radioD2">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
          <div class="col-sm-5">
            <div class="form-group label-floating">
              <div class="inputGroup">
                <input id="radioD3" name="group4" type="radio" />
                <label for="radioD3">S.Prasanna Venkatesh</label>
              </div>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
  <div class="wizard-footer">
    <div class="pull-right">
      <input id="next" type='button' class='btn btn-next btn-fill btn-primary btn-wd' name='next' value='Next' />
      <input type='button' class='btn btn-finish btn-fill btn-primary btn-wd' name='finish' value='Finish' />
    </div>
    <div class="pull-left">
      <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
    </div>
    <div class="clearfix"></div>
  </div>
</form>