在MVC 4剃須刀中一個接一個地選中列表中的每個復選框后如何調用Ajax函數

Question

我想基於下面列出的ul選中的復選框來調用AJAX函數。 基於name="chkbrand_1" ，每個復選框都不同，即。 chkbrand_1，chkbrand_2，chkbrand_3等。

我得到一個正確的價值

   $('.searchType').click(function () {
                var checkboxName = $(this).attr("name");
                alert(checkboxName);
            });

但是沒有得到正確的價值

 $('ul.chk li span').click(function () {
        var checkboxName = $(this).attr("name");
        alert(checkboxName);
    });

以下是克林特首頁的結果

<ul class="nav nav-list chk" id="brandnames">
    <li>
        <a style="padding-top: 2px; padding-bottom: 2px;">
            <input type="checkbox" name="chkbrand_1" id="chkbrand" value="Intex" />
            <span style="cursor: pointer;">
                Intex 
                <span class="badge badge-info">4</span>
            </span>
        </a>
    </li>
    <li>
        <a style="padding-top: 2px; padding-bottom: 2px;">
            <input type="checkbox" name="chkbrand_6" id="chkbrand" value="iPhone" />
            <span style="cursor: pointer;">
                iPhone 
                <span class="badge badge-info">5</span>
            </span>
        </a>
    </li>
    <li>
        <a style="padding-top: 2px; padding-bottom: 2px;">
            <input type="checkbox" name="chkbrand_5" id="chkbrand" value="Nokia" />
            <span style="cursor: pointer;">
                Nokia 
                <span class="badge badge-info">3</span>
            </span>
        </a>
    </li>
    <li>
        <a style="padding-top: 2px; padding-bottom: 2px;">
            <input type="checkbox" name="chkbrand_2" id="chkbrand" value="Samsung" />
            <span style="cursor: pointer;">
                Samsung <span class="badge badge-info">3</span>
            </span>
        </a>
    </li>
    <li>
        <a style="padding-top: 2px; padding-bottom: 2px;">
            <input type="checkbox" name="chkbrand_3" id="chkbrand" value="Sony" />
            <span style="cursor: pointer;">
                Sony 
                <span class="badge badge-info">2</span>
            </span>
        </a>
    </li>
    <li>
        <a style="padding-top: 2px; padding-bottom: 2px;">
            <input type="checkbox" name="chkbrand_4" id="chkbrand" value="Xolo" />
            <span style="cursor: pointer;">
                Xolo 
                <span class="badge badge-info">3</span>
            </span>
        </a>
    </li>
</ul>

Answer 1

$("input['type=checkbox']").on('change', function(e){ // event
   var checkboxName = $(this).attr("name"); //get checkbox name
   if(checkboxName == "chkbrand_4")
   {
      $.ajax(...) // your call
   }
});

OP后編輯。 如果您需要輸入value ，應該這樣得到， 請檢查小提琴 ：

$('ul.chk li span').click(function () {
    var checkboxName = $(this).parent().find("input").val();
    alert(checkboxName);
});