Передайте значение флажка check и отобразите первое значение в массиве

Я пробовал этот код, задал id = "submit" в кнопке submit модальной формы и id = "test_modal []" на флажках, я использовал некоторые функции jquery, которые я установил в заголовке <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script type="text/javascript"> $(document).ready(function(){ $("#submit").click(function(e) { // var checked = []; i=0; temp="" $("input[name='test_modal[]']:checked").each(function () { temp=$(this).val(); i++; // checked.push($(this).val()); }); if (i==1) $("#test").val(temp); else if (i>1) $("#test").val('multiple'); $("#modal").fadeOut(); // alert($("#do").val()) e.preventDefault(); }); });</script> 

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

Переменная PHP для переменной Javascript:

 <?php $myvar=10; ?> <script type="text/javascript"> jsvar = <?php echo $myvar; ?>; document.write(jsvar); // Test to see if its prints 10: </script> 

Переменная переменной переменной Javascript:

 <form name="myform4"> <input type="hidden" name="formvar" value="100"> </form> <script type="text/javascript"> jsvar = document.myform4.formvar.value; document.write(jsvar) // test </script> 

Переменная PHP для переменной формы:

 <form name="myform4"> <input type="hidden" name="formvar" value="<?php $phpvar=10; echo $phpvar; ?>"> // PHP code inside HTML!! </form> 

Переменная Javascript для переменной формы:

 <form name="myform3"> <!-- It needn't be a "hidden" type, but anything from radio buttons to check boxes --> <input type="hidden" name="formvar" value=""> </form> <script type="text/javascript"> jsvar=10; document.myform3.formvar.value = jsvar; </script> 

JavaScript: Вы можете решить эту проблему только с помощью JS. Для этого вам нужно заменить action -Attribute в form -Tag на action="#" . Чтобы узнать больше о хэштеге, найдите эту ссылку.

После этого вам нужно вызвать JS-функцию, когда форма будет отправлена. Вы можете сделать это, добавив onSubmit="countCheckboxes()" в <form> -Attribute. Это означает, что если форма будет отправлена, эта JS-функция будет выполнена. Теперь вам просто нужно создать новую JS-функцию, называемую countCheckboxes() . Там вы можете подсчитать выбранные флажки с помощью этой строки:

 alert(document.querySelectorAll('input[type="checkbox"]:checked').length); 

Проверьте, есть ли только один выбранный флажок или больше, и установите значение <input> .

Наконечник:

Получите значение только установленного флажка, вы должны перестроить свой HTML следующим образом:

 <label> Step 1 <input type="checkbox" ... /> </label> <label> Step 2 ... 

А затем получите (первый и единственный) текст в ярлыке с отмеченным полем следующим образом:

 document.querySelectorAll('input[type="checkbox"]:checked')[0].parentElement.textContent 

jQuery: Чтобы открыть и закрыть свой модальный, вы должны использовать JS. Я рекомендую вам использовать библиотеку jQuery (ознакомьтесь с этой статьей, чтобы узнать, как использовать jQuery в JS). При этом вы можете просто открыть и закрыть модальный с помощью .fadeIn () и .fadeOut () . На самом деле, здесь у нас есть другая проблема: обычно в jQuery вы можете проверить, было ли что-то нажато с помощью этого кода:

 $("#idOfYouElement").click(function() { // this code gets executed if the element got clicked }); 

Но в вашем случае input отключен и не запускает clickevent, и это приводит к тому, что .click() -Function также не выполняется. Чтобы исправить это, мы <div> на вход, который является прозрачным, чтобы пользователи его не видели. Затем мы добавляем .click() -функцию к этому div а не к input . Это будет выглядеть так:

HTML:

 <form method="post" name="mainform" action=""> <label>TestLabel</label> <input type="text" id="inpCheckboxes" name="test" placeholder="test" value="" disabled > </form> 

JavaScript:

 $("#inpCheckboxes").click(function(){ $("#idOfYourModal").fadeIn(); }); 

После этого мы должны закрыть модальный файл после нажатия кнопки отправки. Для этого есть несколько решений, для меня этот, использующий .submit() является самым чистым:

 $("#idOfYourForm").submit(function() { $("#idOfyourModal").fadeOut(); // Since your Modal is also your Form, you could also use here $(this).fadeOut(); }); 

Вы также хотите подсчитать все выбранные флажки. Вы можете комбинировать это с вашей функцией выше, поскольку вы хотите подсчитать флажки, когда пользователь нажимает «submit». JQuery-способ подсчета боксов:

 var l = $("input[type='checkbox']:checked").length; 

С помощью этого значения теперь вы можете использовать if else установить значение вашего <input> -Field (не забудьте удалить теперь disabled -Attribute из него).