Question

问题
我试图在我的网站的一个页面上运行一些ajax，基本上我有三个复选框，所有这些都在pageload上未被选中，当点击一个复选框时我需要能够通过ajax加载相关的HTML。这个系统目前是一个PHP脚本，取决于POST的设置返回一个不同的视图，所以我认为我需要的只是通过AJAX发送POST，但每次检查一个新的复选框时我都需要这样做。

我的HTML看起来像这样，

    div class="segment">
               <div class="label">
                <label>Choose region: </label>
               </div>


<div class="column w190">
                    <div class="segment">
                        <div class="input">
                            <input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Nationwide]" id="inp_Nationwide">
                        </div>
                        <div class="label ">
                            <label for="inp_Nationwide">Nationwide</label>
                         </div>
                        <div class="s">&nbsp;</div>
                    </div>

</div>

<div class="column w190">
                    <div class="segment">
                        <div class="input">
                            <input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Lancashire]" id="inp_Lancashire">
                        </div>
                        <div class="label ">
                            <label for="inp_Lancashire">Lancashire</label>
                         </div>
                        <div class="s">&nbsp;</div>
                    </div>

</div>

<div class="column w190">
                    <div class="segment">
                        <div class="input">
                            <input type="checkbox" checked="checked" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
                        </div>
                        <div class="label ">
                            <label for="inp_West_Yorkshire">West Yorkshire</label>
                         </div>
                        <div class="s">&nbsp;</div>
                    </div>
               <div class="s">&nbsp;</div>
       </div>
</div>

我目前的尝试是确定输入是否已被点击，所以我用我的javascript做了这个，虽然这可能是错误的，

$('input.radio').click(function(){
        if($(this).hasClass('clicked')) {
            $(this).removeClass('clicked');
        } else {
            $(this).addClass('clicked');
        }
    });

Answer 1

你可以做到

    $('input.radio').change(function(){ // will trigger when the checked status changes
            var checked = $(this).attr("checked"); // will return "checked" or false I think.
            // Do whatever request you like with the checked status
    });

另外，如果你说

所有的三个复选框页面加载未被选中

他们应该有checked=""

Answer 2

$("input:checkbox:checked")

将返回当前选中的所有复选框。

事件处理程序.change()将在输入发生更改时绑定，因此对于无线电/复选框，无论何时切换它都会绑定，因此无需使用click()。

$(".radio:checkbox").change(function() {
     var boxChecked = $(this).is(":checked");
     if(boxChecked) {
         ...do ajax...
      }
 });

但考虑到你可以使用toggle()方法，这也有点草率。另外，你想在取消选中时销毁html吗？或者这是一次性交易？

Answer 3

$('input:checkbox').bind('click', function(e){
       switch(e.target.id){
           case 'someid':{
                 if($(this).is(':checked')){
                    //ajax call here
                 }
                 break;
           }
           case 'anotherid':{
                 // something
                 break;
           }
       }
    });

实际上，如果要素，您可以先更改排列方式选中或取消选中，然后切换ids ..嗯

jquery复选框有助于获取复选框名称和值

3 个答案: