In checkbox without clicking submit button how to send the selected checkbox value?

Question

This is my code for html input checkbox

  <tr>

                    <td><input id="cancelreservation" type="checkbox" class="selectcheck" value="cancelreservation" name="cancelreservation"  ><B>Cancel Reservation</B></td>


                    <td><input id="changeavailabilty" type="checkbox" class="selectcheck" value="changeavailabilty" name="changeavailabilty"   ><B>Change Availability</B></td> 


                    <td><input id="changeconfig" type="checkbox" class="selectcheck" value="changeconfig" name="changeconfig"  ><B>Change Configuration</B></td>

                </tr>

         <div style="text-align:center;padding:50px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="myFunction();">Next</a>

        </div>

I want to pass the value without clicking the next button

function myFunction() {
    var checkedValue = document.querySelector('.selectcheck:checked').value;
    console.log('aa ' + checkedValue);
<%--cancelreservation--%>
    if (checkedValue === 'cancelreservation') {
        $("#requesttable").empty();
        $("#requesttitle").empty();
        $("#requesttitle").append("<center><legend><h2>Cancel Reservation</h2></legend></center>");
        $("#requesttable").append("<tr><td><B>Reservation ID</B></td><td><input id='reservationId' class='easyui-textbox' name='reservationId' style='width:200px' required></td></tr>");
        document.getElementById("sumbitclear").style.visibility = "visible";

    }
<%--changeavailabilty--%>
    if (checkedValue === 'changeavailabilty') {
        $("#requesttable").empty();
        $("#requesttitle").empty();
        $("#requesttitle").append("<center><legend><h2>Change Availability</h2></legend></center>");
        $("#requesttable").append("<tr><td><B>connector ID</B></td><td><input id=connectorIdchngeavailbty class='easyui-textbox' name=connectorIdchngeavailbty style=width:200px;></td><tr><td><B>Availability Type</B></td><td><select id=Availabilitytype class=easyui-combobox name=Availabilitytype style=width:200px;><option>Operative</option><option>Inoperative</option></select></td></tr>");
        document.getElementById("sumbitclear").style.visibility = "visible";

    }
<%--changeconfig--%>
    if (checkedValue === 'changeconfig') {
        $("#requesttable").empty();
        $("#requesttitle").empty();
        $("#requesttitle").append("<center><legend><h2>Change Configuration</h2></legend></center>");
        $("#requesttable").append("<tr><td><B>Key</B></td><td><input id='Keychangeconfig' class='easyui-textbox' name='Keychangeconfig' style='width:200px;' required></td></tr><tr><td><B>Value</B></td><td><input id='value' class='easyui-textbox' name='value' style='width:200px;'></td></tr>");    
       document.getElementById("sumbitclear").style.visibility = "visible";
    }

Answer 1

you can use jquery on change event for that.

$('input [type = "checkbox"]').on('change',function(){
   if($(this).prop("checked") == true){
      var checkBoxVal = $(this).val();
      // your code
    }
});

Answer 2

只需对复选框的change事件进行ajax调用，然后将值传递给所需的http URL。

$("#cancelreservation").change(function () { var value = $(this).val(); $.ajax({ type: "POST", url: "", async: true, data: { action1: value }, success: function (msg) { alert('Success'); if (msg != 'success') { alert('Fail'); } } }); });

Answer 3

 $('input:checkbox').click(function (){ var val = $(this).is(':checked'); var name = $(this).attr('name'); $.ajax({ type: "POST", url: 'myUrl', data: { name : val }, success: function(data) { alert('it worked'); }, error: function() { } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" name="checkbox1" >Checkbox 1</input> <input type="checkbox" name="checkbox2">Checkbox 2</input> <input type="checkbox" name="checkbox3">Checkbox 3</input>