1

asp:CheckBox次のタグが付いたがあります。

<asp:CheckBox ID="cbTest1" runat="server" onchange="cbChange(this.id);"/>

cbChangeは、次のような Javascript 関数です<head>(今のところ単純です)。

<script type="text/javascript">

    function cbChange(senderID) {
        alert('|' + senderID + '|'); // '|' is to help see string length
        return false;
    }

</script>

これで、 をクリックするたびにcbTest1、次のテキストを含むアラート ボックスが表示されます。

||

つまり、空/null 文字列です。<input>また、より伝統的なものを使用すると、期待される結果が得られることにも注意してください。

( のコード<input>)

<input type="checkbox" name="cbtest2" id="cbtest2" onchange="cbChange(this.id);" />

(チェックしたときの警告ボックス内のテキストcbtest2)

|cbtest2|

でヌル/空の文字列を取得するのに、asp:Checkboxで期待される動作を取得するのはなぜ<input>ですか?

EDITには(lowercase) の代わりに属性asp:CheckBoxがあるため、もう少し調査を行ったので、試してみました。これで、アラート ボックスに次の出力が表示されます。IDidonchange="cbChange(this.ID);"

|未定義|

なぜこれも起こるのでしょうか？

4

2 に答える 2

1

レンダリングされたページ ソースをプルアップすると、ASP が実際にこれを次のようにレンダリングすることがわかります。

<span onchange="cbChange(this.id);"><input id="ContentArea_cbTest" type="checkbox" name="ctl00$ContentArea$cbTest" /></span>

あなたのinput要素は実際には要素でネストされていspanます。

Pure JS を使用しても、次のようにして ID を取得できますinput。

<asp:CheckBox ID="cbTest" runat="server" onchange="cbChange(this.childNodes[0].id);"/>
于 2013-07-10T15:50:28.163 に答える
1

ソースを表示すると、次のように表示されます。

<span onchange="cbChange(this.id);">
    <input id="cbTest" type="checkbox" name="cbTest" />
</span>

WebForms の欠点の 1 つは、マークアップが常に期待どおりに表示されるとは限らないことです。

最善の策は、イベントをクライアントで手動で接続することです。jQueryを使用している場合は、次のことができます。

jQuery(document).ready(function() {
    jQuery("#<%= cbTest.ClientID %>").click(function() {
        cbChange(jQuery(this).attr("id"));
    });
});

（jQueryを使用していない場合は、同じことを行います。通常のjavascriptを使用して手動でクリックイベントに接続するだけです-私は常にその構文を調べなければなりません...）

于 2013-07-10T15:52:02.320 に答える