while clicking checbox the previous checkbox value is there,how to change accordingly to whatever checkbox is clicked?

Question

       <div id="cmsView" class="cmsView" region="north" collapsible="false" border="true">
            <center>
                <table cellpadding="8" cellspacing="15" id="dg" CLASS="actiontab"  data-options="singleSelect:true">
                    <center><legend><h2>CMS OPERATIONS</h2></legend></center>
                    <tr>    
                        <td><input id="cancelreservation" type="checkbox" class="selectcheck" value="cancelreservation" name="cancelreservation" onclick="myFunction();" ><B>Cancel Reservation</B></td>   
                        <td><input id="changeavailabilty" type="checkbox" class="selectcheck" value="changeavailabilty" name="changeavailabilty" onclick="myFunction();"  ><B>Change Availability</B></td>    
                        <td><input id="changeconfig" type="checkbox" class="selectcheck" value="changeconfig" name="changeconfig" onclick="myFunction();" ><B>Change Configuration</B></td>

                    </tr>
                    <tr>    
                        <td><input id="clearcache" type="checkbox" class="selectcheck" value="clearcache" name="clearcache" onclick="myFunction();"  ><B>Clear Cache</B></td>    
                        <td><input id="datatransfer" type="checkbox" class="selectcheck" value="datatransfer" name="datatransfer" onclick="myFunction();" ><B>Data Transfer</B></td>    
                        <td><input id="remotestart" type="checkbox" class="selectcheck"  value="remotestart" name="remotestart" onclick="myFunction();"><B>Remote Start</B></td>
                    </tr>

the above is my html code and onclickfunction is down here..while clicking next button it changes but the onclick function remains the previous one which was clicked..if i clicked two or three times only it changes to the current checkbox function which was clicked.

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

            }
    <%--clearcache--%>
            if (checkedValue === 'clearcache') {
                $("#requesttable").empty();
                $("#requesttitle").empty();
     $("#requesttitle").append("<center><legend><h2>Clear Cache</h2></legend></center>");
                $("#requesttable").append("<tr><td><B>ConnectorID</B></td><td><input id='conntridclearcache' class='easyui-textbox' name='conntridclearcache' style='width:200px;'></td></tr>");

this link should help http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group — Mina Jacob, Jun 15 '16 at 05:46
you have so many errors in the script above 1- there is an exra ' before changeconfig 2- id requesttable does not exist in html 3- div and table not closed 3- javascript function not closed — Mina Jacob, Jun 15 '16 at 05:58

score 0 · Answer 1 · answered Jun 15 '16 at 05:45

Change input type to radio if you are trying to allow only one selection at a time.

Try the below code:

HTML:

 <div id="cmsView" class="cmsView" region="north" collapsible="false" border="true">
        <center>
            <table cellpadding="8" cellspacing="15" id="dg" CLASS="actiontab"  data-options="singleSelect:true">
                <center><legend><h2>CMS OPERATIONS</h2></legend></center>
                <tr>

                    <td><input id="cancelreservation" type="radio" name="options" class="selectcheck" value="cancelreservation" name="cancelreservation" onclick="myFunction();" ><B>Cancel Reservation</B></td>


                    <td><input id="changeavailabilty" type="radio" name="options" class="selectcheck" value="changeavailabilty" name="changeavailabilty" onclick="myFunction();"  ><B>Change Availability</B></td>  


                    <td><input id="changeconfig" type="radio" name="options" class="selectcheck" value="changeconfig" name="changeconfig" onclick="myFunction();" ><B>Change Configuration</B></td>

                </tr>
                <tr>

                    <td><input id="clearcache" type="radio" name="options" class="selectcheck" value="clearcache" name="clearcache" onclick="myFunction();"  ><B>Clear Cache</B></td>



                    <td><input id="datatransfer" type="radio" name="options" class="selectcheck" value="datatransfer" name="datatransfer" onclick="myFunction();" ><B>Data Transfer</B></td>

                    <td><input id="remotestart" type="radio" name="options" class="selectcheck"  value="remotestart" name="remotestart" onclick="myFunction();"><B>Remote Start</B></td>
                </tr> 
</table>  </center> </div>

JS:

 function myFunction() {
    var checkedValue = document.querySelector('.selectcheck:checked').value;
    console.log('aa ' + checkedValue);

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

    }

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

    }

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

        }

        if (checkedValue === 'clearcache') {
            $("#requesttable").empty();
            $("#requesttitle").empty();
 $("#requesttitle").append("<center><legend><h2>Clear Cache</h2></legend></center>");
            $("#requesttable").append("<tr><td><B>ConnectorID</B></td><td><input id='conntridclearcache' class='easyui-textbox' name='conntridclearcache' style='width:200px;'></td></tr>");
}
}

while clicking checbox the previous checkbox value is there,how to change accordingly to whatever checkbox is clicked?

1 Answers1