Question

我想根据从列表中选择show/Hide值来checkbox div。

这是我尝试过的： -

function valueChanged() {
    if ($('#ddlStatus_1').is(":checked"))
        $("#divExpense").hide();
    else
        $("#divExpense").show();
}

和html是

<div style="overflow-y: scroll; width: 320px; height: 100px;">
    <table id="Table1" name="Status" onchange="valueChanged()">
        <tr>
            <td>
                <input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" /><label for="ddlStatus_0">Agreement</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" /><label for="ddlStatus_1">Registration
                    / Conveyance Deed</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" /><label for="ddlStatus_2">7/12
                    Transfer on Name</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" /><label for="ddlStatus_3">Sold</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" /><label for="ddlStatus_4">Cancelled</label>
            </td>
        </tr>
    </table>
</div>
<br />
<div id="div1">
    <table cellpadding="0" cellspacing="2" width="100%">
        <tr>
            <td class="otab">
                This is test Expense Information :
            </td>
        </tr>
    </table>
</div>
<div id="divPayment">
    <table cellpadding="0" cellspacing="2" width="100%">
        <tr>
            <td class="otab">
                This is test Payment Information :
            </td>
        </tr>
    </table>
</div>

但它不适合我。

Answer 1

将change事件添加到#ddlStatus_1而非table，如下所示。

$('#ddlStatus_1').change(function() {
    $("#divExpense").toggle(!this.checked);
})

Answer 2

以下是我评论中代码的运行版本。您不希望将更改添加到表标记。如果您需要表单中的所有复选框来切换某些内容，请为其添加一个类并使用数据属性来查看要切换的内容

注意我将div1更改为divExpense

＆＃13;

$(function() {
  $('#ddlStatus_1').on("click", function() {
     $("#divExpense").toggle(!this.checked);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<div style="overflow-y: scroll; width: 320px; height: 100px;">
  <table id="Table1" name="Status">
    <tr>
      <td>
        <input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" />
        <label for="ddlStatus_0">Agreement</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" />
        <label for="ddlStatus_1">Registration / Conveyance Deed</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" />
        <label for="ddlStatus_2">7/12 Transfer on Name</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" />
        <label for="ddlStatus_3">Sold</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" />
        <label for="ddlStatus_4">Cancelled</label>
      </td>
    </tr>
  </table>
</div>
<br />
<div id="divExpense">
  <table cellpadding="0" cellspacing="2" width="100%">
    <tr>
      <td class="otab">
        This is test Expense Information :
      </td>
    </tr>
  </table>
</div>
<div id="divPayment">
  <table cellpadding="0" cellspacing="2" width="100%">
    <tr>
      <td class="otab">
        This is test Payment Information :
      </td>
    </tr>
  </table>
</div>

＆＃13;

Checkboxlist检查取消选中不在javascript中工作

2 个答案: