Выбранные значения флажка в флажке изменения модального изменения bootstrap в родительском окне

-4

флажок в модуле выбирает значения флажка в родительском окне

Когда мода bootstrap имеет форму с значениями флажков, если значения выбраны в модальном, мне нужны те же значения формы флажка, которые будут выбраны в родительском окне

решение проблемы было бы для пользователя сделать выбор в модальном, скажем, выбирая 2-3-4 элемента и при закрытии модального окна родительского окна обновляется с выбранными флажками, любая помощь с этим была бы благодарна

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Modal Example</h2>

<form>
<h3>Select your favorite sports:</h3>
<label><input type="checkbox" value="football" name="sport"> Football</label>
<label><input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input type="checkbox" value="racing" name="sport"> Racing</label>
<label><input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br><br>
</form>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<form>
<h3>Select your favorite sports:</h3>
<label><input type="checkbox" value="football" name="sport"> Football</label>
<label><input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input type="checkbox" value="racing" name="sport"> Racing</label>
<label><input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

</div>

</body>
</html>

спросил(а) 2018-03-21T14:24:00+03:00 2 года, 7 месяцев назад
0
101

Пожалуйста, используйте эту скрипку...

$( document ).ready(function() {
$('.modal_check_box').change(function(){
var test = $(this).val();
$('input[value^='+test+']').prop('checked',true);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Modal Example</h2>

<form>
<h3>Select your favorite sports:</h3>
<label><input type="checkbox" value="football" name="sport"> Football</label>
<label><input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input type="checkbox" value="racing" name="sport"> Racing</label>
<label><input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br><br>
</form>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<form>
<h3>Select your favorite sports:</h3>
<label><input type="checkbox" class="modal_check_box" value="football" name="sport"> Football</label>
<label><input type="checkbox" class="modal_check_box" value="baseball" name="sport"> Baseball</label>
<label><input type="checkbox" class="modal_check_box" value="cricket" name="sport"> Cricket</label>
<label><input type="checkbox" class="modal_check_box" value="boxing" name="sport"> Boxing</label>
<label><input type="checkbox" class="modal_check_box" value="racing" name="sport"> Racing</label>
<label><input type="checkbox" class="modal_check_box" value="swimming" name="sport"> Swimming</label>
<br>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

</div>
</body>
</html>

Я добавил класс modal_check_box только для модальных флажков (нужно найти, какой из них используется в модальном).

ответил(а) 2018-03-21T14:38:00+03:00 2 года, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема