#jquery #html
#jquery #HTML
Вопрос:
Мой код 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. если вы хотите, чтобы были выбраны оба переключателя, удалите атрибут name или установите для обоих другой атрибут name.
2. попробуйте использовать это
$('input[type=radio][name=name]').change(function() { $(this).is(':checked') { if (this.value == 'value1') { $("#myModal1").modal('show'); } else if (this.value == 'value2') { $("#myModal2").modal('show'); } } });
3. @AshishJindal да, это верно. Я могу установить разные атрибуты имени. Но не могли бы вы помочь мне настроить мой код Jquery?
4. Вам нужно протестировать
checked
свойство, напримерthis.checked amp;amp; this.value == 'value1'
5. @Satpal благодарит за ваш комментарий. Это помогло мне
Ответ №1:
Переключатели предназначены для взаимоисключающих вариантов — их нельзя выбирать одновременно (для этого используйте флажки):
также вы можете немного упростить свою логику: установите значение 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>
Комментарии:
1. По вашему ответу я понял разницу между переключателями и флажками. Лучше ли использовать флажки вместо переключателей?
Ответ №2:
Вам нужно использовать 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>
Ответ №3:
<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>
Ответ №4:
сначала сделайте так, чтобы вам требовалось радио, подобное этому
<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();
}
});
});
}