Блог

Мой код Jquery выглядит следующим образом

 <script type='text/javascript'>
window.onload=function(){
$(document).ready(function() {
    $('input[type=radio][name=name]').change(function() {
        if (this.value == 'value1') {
            $("#myModal1").modal('show');
        }
        else if(this.value == 'value2') {
            $("#myModal2").modal('show');
        }
});
});
}
</script>
  

мой HTML-код здесь,

 <input type="radio" name="name" value="value1">Male<br>
<input type="radio" name="name" value="value2">Femal<br>
  

и myModal1 здесь

 <div id="myModal1" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">amp;times;</button>
                    <h4 class="modal-title">Male</h4>
                </div>
                <div class="modal-body">

          <div class="row">

            <div class="col-xs-12">
              <div class="checkbox">
                <label>
                  <input type="checkbox">Amal
                </label>
              </div>
            </div>

            <div class="col-xs-12">
              <div class="checkbox">
                <label>
                  <input type="checkbox">kamal
                </label>
              </div>
            </div>

            <div class="col-xs-12">
              <div class="checkbox">
                <label>
                  <input type="checkbox">Nimal
                </label>
              </div>
            </div>

          </div>
                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-primary pull-right" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>
  

Что я хочу сделать, так это установить переключатели, как показано ниже,
если я нажму на переключатель «male», то должна появиться MyModel1, а если я нажму на переключатель «female», то должна появиться myModel2. И должны быть выбраны обе переключатели. Но я не могу этого сделать, потому что я очень новичок в jquery.
Если я хочу выбрать только один переключатель и получить его модальный, этот код действительно работает.
Может ли кто-нибудь, пожалуйста, помочь мне установить код как то, что мне нужно?

Переключатели предназначены для взаимоисключающих вариантов — их нельзя выбирать одновременно (для этого используйте флажки):

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

Обратите внимание, что я просто consol.регистрирую измененное значение и прокомментировал фактическую команду.’show’), поскольку у меня нет модального в therte — но вы могли бы применить это к своему коду и запустить требуемый модальный.

Я бы также предложил использовать только один модальный и поменять местами отображение разных разделов внутри него для отображения двух состояний. Это лучше, чем копировать код для двух модальностей.

 $(document).ready(function(){
    $('input[type=radio][name=name]').change(function() {
        var option =$(this).val();
      console.log('modal '   option  ' would be triggered');
      //$("#myModal"   option).modal('show');
       })
    })  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="name" value="1"/>Male<br>
<input type="radio" name="name" value="2"/>Female<br>  

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

 jQuery(document).ready(function() {
  $('input[type=radio][name=name]').change(function() {
    //if the checkbox is not checked do nothing
    if(!this.checked)
      return;
    
    if (this.value == 'value1') {
      console.log('Show model 1')
    } else if (this.value == 'value2') {
      console.log('Show model 2')
    }
  });
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="name" value="value1">Male
<br>
<input type="radio" name="name" value="value2">Femal
<br>  

 <input type="radio" onchange="fun(this);" name="name" value="value1">Male<br>
<input type="radio" onchange="fun(this);" name="name" value="value2">Femal<br>

<script>

    fun(this)
    {

    if(this.value=="value1")
    {
    $("#myModal1").modal('show');
    $("#myModal2").modal('hide');
    }else{
    $("#myModal2").modal('show');
    $("#myModal1").modal('hide');
    }

    }


</script>
  

сначала сделайте так, чтобы вам требовалось радио, подобное этому

 <input type="radio" name="name" value="value1" required>Male<br>
<input type="radio" name="name" value="value2">Femal<br>
  

затем ваш код jquery для отображения выбранного радио и скрытия других следующим образом

 window.onload=function(){
$(document).ready(function() {
$('input[type=radio][name=name]').change(function() {
    if (this.value == 'value1') {
        $("#myModal1").show();
        $("#myModal2").hide();
    }
    else if(this.value == 'value2') {
        $("#myModal2").show();
        $("#myModal1").hide();
    }
 });
 });
 }