jqueryonclickwith单选按钮应该显示特定的div

在html中，标记是这样的

<div id="sales-menu-wrp">
    <div class="radio-buttons-wrap">
      <input type="radio" id="create_sales" name="toggler"/>Create Sales 
      <input type="radio" id="manage-sales" name="toggler" checked="checked" /> Manage Sales
    </div><!--.radio-buttons-wrap-->
  <div id="sales-details-form"  style="display:none;" >
    <div class="sales-product-details-wrap">
      <table id="sales-details-heading">
        <tr>
          <th>Products</th>
          <th>Description</th>
          <th>Unit Cost</th>
          <th>Quantity</th>
          <th>Discount Type</th>
          <th>Discount Price</th>
          <th>Price</th>
        </tr>
      </table>
      <table id="sales-product-details">
        <tr>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
        </tr>
      </table><!--#sales-product-detail-->

    </div><!--.sales-product-details-wrap-->
    </div><!--#sales-details-form-->
    <div id="sales-details-managment" style="" >
      <div class="managment-header">
        <ul>
          <li>Store Name</li>
          <li>Store Location</li>
          <li>Store Code</li>
          <li>Products</li>
        </ul>
      </div>
      <table class="sales-total-desc">
        <tr>
          <td>store test</td>
          <td>store test</td>
          <td>store test</td>
          <td>store test</td>
        </tr>
      </table>         
    </div><!--#sales-details-managment-->
  </div><!--#sales-menu-wrap-->

---

它在这里工作，但当有人刷新页面时，销售创建按钮与管理div一起工作，单击上的管理单选按钮显示销售创建表单。因此，有人能告诉我如何解决这个问题，以便当一些人单击销售管理单选按钮时，它应该只显示管理部分，有人单击创建销售，然后它将显示销售创建表单。任何帮助和建议都是非常值得的。谢谢

使用“更改””而不是“单击””

//在

销售明细管理

上设置显示无，而不是“

销售明细表

”

<div id="sales-details-managment" style="display:none;" >

---

使用“更改””而不是“单击””

//在

销售明细管理

上设置显示无，而不是“

销售明细表

”

<div id="sales-details-managment" style="display:none;" >

---

您可以测试单击了哪些单选按钮，并相应地

.hide（）

或

.show（）

：

jQuery(document).ready(function () {
    jQuery('input[name="toggler"]').click(function () {
        if (this.id === "create_sales") {
            $('#sales-details-form').show();
            $('#sales-details-managment').hide();
        } else {
            $('#sales-details-form').hide();
            $('#sales-details-managment').show();
        }
    });
});

演示：

或者，对于更紧凑的代码，您可以利用指示是显示还是隐藏的事实：

jQuery(document).ready(function () {
    jQuery('input[name="toggler"]').click(function () {
        var isCreate = (this.id === "create_sales");
        $('#sales-details-form').toggle(isCreate);
        $('#sales-details-managment').toggle(!isCreate);
    });
});

---

演示：

您可以测试单击了哪些单选按钮，并相应地

.hide（）

或

.show（）

：

jQuery(document).ready(function () {
    jQuery('input[name="toggler"]').click(function () {
        if (this.id === "create_sales") {
            $('#sales-details-form').show();
            $('#sales-details-managment').hide();
        } else {
            $('#sales-details-form').hide();
            $('#sales-details-managment').show();
        }
    });
});

演示：

或者，对于更紧凑的代码，您可以利用指示是显示还是隐藏的事实：

jQuery(document).ready(function () {
    jQuery('input[name="toggler"]').click(function () {
        var isCreate = (this.id === "create_sales");
        $('#sales-details-form').toggle(isCreate);
        $('#sales-details-managment').toggle(!isCreate);
    });
});

---

演示：

我在JSFIDLE上检查过，这段代码运行良好。按钮在哪里？这段代码运行良好，我在JSFIDLE上检查过。按钮在哪里？您也应该使用

change

而不是

click

，不是每个人都使用鼠标单击与表单交互。@David-通过键盘选择单选按钮会生成单击事件（您可以在我的演示中看到这一点），但在控件失去焦点之前，不一定生成更改事件。所以我相信点击更可靠。你也应该使用

change

而不是

click

，不是每个人都使用鼠标点击与表单交互。@David-通过键盘选择单选按钮会生成点击事件（你可以在我的演示中看到这一点），但在控件失去焦点之前，不一定生成更改事件。所以我相信点击更可靠。