Question

在jQuery中，我有一个按钮（切换）来设置display none / block。当我点击按钮时，它会添加一个新行。

HTML：

<button id="tdDisplay">Click me!</button>
    <table>
        <tr style="vertical-align: top">
            <td>
                <label style="font-weight: normal">Placement Preference :</label></td>
            <td>
                <input type="radio"  id="rbOrderByActivityGroup" class='rbImgChecker'  name="rbPlacement" style="margin-right: 5px;float:left" />Order by Batch -  Reverse order after each activity batch<br />
                <img id="ImgOByActivityGroup"  class='rbImgChecker' src="Images/orderByActivityBatch.png" /><br />

                <input type="radio"   id="rbOBSReverse" class='rbImgChecker' name="rbPlacement" style="margin-right: 5px;float:left" />Order by Subject - Reverse order after each activity<br />
                <img id="ImgOBSReverse"  class='rbImgChecker' src="Images/orderBySubjectReverse.png" /><br />

                <input type="radio"   id="rbOBS" class='rbImgChecker' name="rbPlacement" style="margin-right: 5px;float:left" />Order by Subject<br />
                <img id="ImgOBS"  class='rbImgChecker' src="Images/orderBySubject.png" /><br />

                <input type="radio"   id="rbOBA" class='rbImgChecker' name="rbPlacement" style="margin-right: 5px;float:left" />Order by Activity<br />
                <img id="ImgOBA"  class='rbImgChecker' src="Images/orderByActivity.png" />
            </td>
        </tr>
    </table>

脚本：

  <script type="text/javascript">
    $(function () {
        var checker = true;
        if(checker)
            $('#tdDisplay').click(function () {
                if (checker)
                    $(".rbImgChecker").css("display", "block");
                else
                    $(".rbImgChecker").css("display", "none");
                checker = !checker;
        });
   });
</script>

Answer 1

你可以使用：

$('#tdDisplay').click(function () {                    
    $(".rbImgChecker").toggle();                  
});

.toggle()会根据{9}}的实际状态将display设置为inline或none。

<强> Demo

显示无在jQuery按钮单击中添加新行

1 个答案: