Если переключатель установлен, то отображать div в Codeigniter

ProgramBox

Если переключатель установлен, то отображать div в Codeigniter

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#javascript #php #jquery #twitter-bootstrap #codeigniter

Вопрос:

Я пытаюсь создать пользовательскую форму, я застрял в ней, потому что я хочу, чтобы, если переключатель установлен, отображался div.Я не мог этого сделать, так как я немного слаб в javascript. пожалуйста, найдите мой код ниже. Моя кнопка

  <label>
    <input type="radio" name="groups[]" value="6"> Head of Distribution Sales
</label>

И после выбора кнопки я хочу показать этот div

 <div class="form-group">
    <label class="col-md-3 control-label">Regions</label>
    <div class="col-md-9">
            <div class="checkbox-list">
                <label>
                    <input type="checkbox" name="groups[]" value="43"> Dhaka North
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="44"> Dhaka South
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="45"> Comilla
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="46"> Chittagong
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="47"> Khulna
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="48"> Mymensingh
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="49"> Sylhet
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="50"> Rangpur
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="51"> Bogra
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="52"> Barisal
                </label>
            </div>
    </div>
</div>

Пожалуйста, помогите мне, ребята, решить эту проблему.

1. сначала покажите свой код jquery, что вы пробовали

2. Есть ли другие переключатели, которых нет? Или это единственный?

3. вам нужно предоставить полную структуру HTML, если там больше нет переключателей, то только в соответствии с этим у нас есть решение.

Ответ №1:

Для достижения этого вам необходимо внести следующие изменения в свой HTML и реализовать код jquery в виде фрагмента.

Укажите идентификатор div, который вы хотите показать / скрыть.
Изначально скройте div, указав style="display:none"
поместите код jquery для запуска события изменения на переключателе и соответствующим образом отобразите / скройте div.

Пожалуйста, проверьте приведенный ниже фрагмент.

 $("input[type='radio'][name='groups[]']").on("change",function(){
  if($(this).is(':checked')){
    $("#displayDS").show();
  }else{
    $("#displayDS").hide();
  }
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
    <input type="radio" name="groups[]" value="6"> Head of Distribution Sales
</label>
<br/><br/>
<div class="form-group" style="display:none" id="displayDS">
  <label class="col-md-3 control-label">Regions</label>
  <div class="col-md-9">
    <div class="checkbox-list">
      <label>
        <input type="checkbox" name="groups[]" value="43"> Dhaka North
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="44"> Dhaka South
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="45"> Comilla
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="46"> Chittagong
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="47"> Khulna
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="48"> Mymensingh
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="49"> Sylhet
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="50"> Rangpur
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="51"> Bogra
      </label>
      <label>
        <input type="checkbox" name="groups[]" value="52"> Barisal
      </label>
    </div>
  </div>
</div>

1. Спасибо, сэр. Ты спас мой день. @Rahul Patel

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

Ответ №2:

Я добавляю некоторые идентификаторы в упрощитель

 // HTML
<label>
  <input type="radio" id="myRadio" name="groups[]" value="6"> Head of Distribution Sales
</label>

<div id="yourDiv" class="form-group" style="display:none;"> [... checkboxes ...] </div>


// JS
document.getElementById('myRadio').addEventListener('change', function(){
  document.getElementById('yourDiv').style.display = this.checked ? 'block' : 'none';
});

 document.getElementById('myRadio').addEventListener('change', function(){
  document.getElementById('yourDiv').style.display = this.checked ? 'block' : 'none';
});

 <label>
    <input type="radio" id="myRadio" name="groups[]" value="6"> Head of Distribution Sales
</label>
<div id="yourDiv" class="form-group" style="display:none;">
    <label class="col-md-3 control-label">Regions</label>
    <div class="col-md-9">
            <div class="checkbox-list">
                <label>
                    <input type="checkbox" name="groups[]" value="43"> Dhaka North
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="44"> Dhaka South
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="45"> Comilla
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="46"> Chittagong
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="47"> Khulna
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="48"> Mymensingh
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="49"> Sylhet
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="50"> Rangpur
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="51"> Bogra
                </label>
                <label>
                    <input type="checkbox" name="groups[]" value="52"> Barisal
                </label>
                <label>
    <input type="radio" name="groups[]" value="6"> Head of Distribution Sales
</label>
            </div>
    </div>
</div>

Ответ №3:

Используйте jQuery :

 $(document).ready(function() {
$('input[type="radio"]').click(function() {
   if($(this).attr('id') == 'your input id') {
        $('#div id').show();           
   }

   else {
        $('#div id').hide();   
   }
});
});

Метки: Если переключатель установлен то отображать div в Codeigniter