单击复选框时，前一个复选框值在那里，如何根据单击的复选框进行相应更改？答案

【问题标题】：while clicking checbox the previous checkbox value is there,how to change accordingly to whatever checkbox is clicked?单击复选框时，前一个复选框值在那里，如何根据单击的复选框进行相应更改？
【发布时间】：2016-06-17 14:42:30
【问题描述】：

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

上面是我的html 代码和onclickfunction 在这里..虽然点击next button 它会改变但onclick function 仍然是之前点击过的..如果我只点击了两到三下它更改为被点击的current checkbox 函数。

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

【问题讨论】：

可以修复HTML标记无效
这个链接应该对stackoverflow.com/questions/9709209/…有帮助
您在上面的脚本中有很多错误 1-changeconfig 之前有一个 exra ' 2- html 中不存在 id requesttable 3- div 和 table 未关闭 3- javascript 函数未关闭跨度>

标签： javascript jquery html checkbox

【解决方案1】：

如果您尝试一次只允许一个选择，请将输入类型更改为 radio。

试试下面的代码：

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

【讨论】：