Question

我尝试做的只是检查是否选中了复选框，如果是，请取消选中它。复选框正确设置但未显示为已选中。我已经检查了这个，我在<li>之外放了一个复选框，它运行正常

这是我目前的HTML：

    <!DOCTYPE html>
    <html manifest="cache.manifest">
    <head>
        <title></title>
        <link rel="stylesheet" href="Styles/jquery.mobile-1.3.2.min.css" />
        <script src="Scripts/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="Scripts/jquery.bpopup.min.js"></script>
        <script src="Scripts/jquery.mobile-1.3.2.min.js"></script>
        <script src="Events.js"></script>

        |<script src="Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
        <style type="text/css" title="currentStyle">
            @import "Content/DataTables-1.9.4/media/css/jquery.dataTables.css";
        </style>

        <!--Progress Bar Scripts-->
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>

        <script>
            function selectAll() {
                if ($('#checkbox1').is(':checked')) {
                    alert("checked");
                    $('#checkbox1').prop('checked', false);
                }
                else {
                    alert("unchecked");
                    $('#checkbox1').prop('checked', true);
                }
            }
                        </script>
    </head>
<div data-role="page" id="selectProducts" data-theme="b">
<div data-role="content">

            <div data-role="fieldcontain">
                <div style="width: auto; display: inline-block; vertical-align: middle; padding-top:1em">
                    <label for="subtotal" style=" display: inline-block; padding-right: 7em; font-weight: bold">Total:</label>
                    <label id="subtotal"></label>
                </div>
                <div style="width: 200px; display: inline-block; vertical-align: middle; float:right">
                   <!-- <a id="checkAll" href="javascript:selectAll()" data-role="button" style="width: 200px;">Remove Selection</a>-->
                    <input onclick="selectAll()" type="button" id="checkAll" value="Check All" /> 
                    <input type="hidden" id="isChkd" value="true" /> 
                </div>

                <label style="padding-bottom:8em"></label>

            </div>
            <label for="contactShow" style=" display: inline-block; padding-right: 5em; font-weight: bold">Contact: </label>
            <label id="contactShow">Alex Turner</label><br />

            <label for="contactIdShow" style=" display: inline-block; padding-right: 5em; font-weight: bold">Cus Ref: </label>
            <label id="contactIdShow">12345</label><br />



            <ul id="OrderList" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">

                <li data-role="list-divider">Order Details</li>

                <li>
            <a href="#" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
                <label style="border-top-width: 0px; margin-top: 0px; border-bottom-width: 0px; margin-bottom: 0px; border-left-width: 0px; border-right-width: 0px;" data-corners="false">
                    <fieldset data-role="controlgroup">
                        <input type="checkbox" name="checkboxProd" id="checkboxProd2" data-theme="c" checked="checked" />
                        <label for="checkboxProd2" style="border-top-width: 0px; margin-top: 0px; border-bottom-width: 0px; margin-bottom: 0px; border-left-width: 0px; border-right-width: 0px;">
                            <h3>Black Denim</h3>
                        </label>


                        <table id="OrderDetailsTable2" border="0" style="background-color: transparent; border-color: transparent; color: transparent; width: 250px; font-size: small; padding: 0; padding-left: 3em;">
                        </table>

                    </fieldset>
                </label>
            </a>
        </li>
</ul>
            <div style="width: 200px; display: inline-block; vertical-align: middle; float:right">
                    <a href="#searchProducts" data-role="button" style="width: 200px;">Add To Order</a>
                </div>

        </div>
    </div>

Answer 1

<强> DEMO

试试这个

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script> 

    <script>  
    function selectAll()
        {
            if ($('#checkboxProd2').is(':checked'))
            {
                alert("checked");
               $('#checkboxProd2').prop('checked', false);
            }
            else
            {
                 alert("unchecked");
               $('#checkboxProd2').prop('checked', true); 
            }
        }
    </script>
</head>

希望这有帮助，谢谢

设置JQuery HTML javascript复选框工作但不显示为已选中

1 个答案: