传递check复选框的值并显示数组上的第一个值

I tried that code,set id="submit" at the submit button of the modal form and id="test_modal[]" at checkboxes,I used some functions of jquery I set at header the <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>

Here is the sample for couple of cases that you may find usefull for your problem.

PHP variable to Javascript variable:

<?php   $myvar=10;   ?>

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

Form variable to Javascript variable:

<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 variable to Form variable:

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

Javascript variable to Form variable:

<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: You can solve this problem just with JS. To do so, you have to replace you action-Attribute in the form-Tag to action="#". To read more about the hashtag there, look up this link.

After that, you have to call a JS-Function when the Form gets submitted. YOu can do this with adding onSubmit="countCheckboxes()" to the <form>-Attribute. This means, that if the form gets submitted, this JS-Function gets executed. Now, you just have to create a new JS-Function called countCheckboxes(). There, you can count the selected checkboxes with this line:

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

Check now, if there is just one selected checkbox or more and set the value of the <input>.

Tip:

Get the value of the only checked checkbox, you have to restructure your HTML like this:

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

...

And then get the (first and only) text in the label with the checked box like this:

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

jQuery: To open and close your modal you should use JS. I recommend you to use the jQuery library (Check out this article to learn how to use jQuery in your JS). With that, you can simply open and close the modal with .fadeIn() and .fadeOut(). In fact, here we have another problem: Normally in jQuery, you can check if something got clicked with this code:

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

But in your case, the input is disabled and doesn't fire a clickevent and this results that the .click()-Function also doesn't get executed. To fix this, we place a <div> over the input, which is transparent so the users don't see it. Then we add the .click()-Function to this div and not the input. This would look like this:

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();
});

After this, we have to close the modal after the submit-button got clicked. There are multiple solutions for that, for me, this one using .submit() is the cleanest:

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

You also want to count all your checked checkboxes. You can combine this with your function above, since you want to count the checkboxes when the user hits 'submit'. The jQuery-way to count theboxes would be:

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

With this value, you can now use a if else to set the value of your <input>-Field (remember to remove now the disabled-Attribute from it).