在没有单击提交按钮的复选框中如何发送所选的复选框值？

Question

这是我的html输入复选框的代码

  <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>

我想在不点击下一个按钮的情况下传递值

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

你可以在更改事件上使用jquery。

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

Answer 2

只需对复选框的更改事件进行ajax调用，并将值传递给所需的http网址。

$("#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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;