送信ボタンをクリックせずにチェックボックスを選択すると、選択したチェックボックスの値を送信する方法は？

Question

これは、私はあなたがそのための変更イベントにjqueryのを使用することができ、次のボタン

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

をクリックせずに値を渡したい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> 

ための私のコードです。

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

Answer 2

チェックボックスの変更イベントで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>