jquery checkbox help помогает получить имя и значение флажка

Question

Проблема
Я пытаюсь запустить ajax на одной из моих страниц для своего веб-сайта, в основном у меня есть три флажка, все из которых при загрузке страницы не выбраны, когда установлен флажок, я должен иметь возможность загружать через ajax соответствующий HTML. В настоящее время эта система представляет собой PHP-скрипт, который в зависимости от того, что установлен POST, возвращает другое представление, поэтому я думаю, что все, что мне нужно, это отправлять POST через AJAX, но мне нужно делать каждый раз, когда установлен новый флажок.

Мой 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:checkbox:checked")

вернет все флажки, которые в данный момент отмечены.

Обработчик события .change() будет связываться с каждым изменением ввода, поэтому для радио / флажков он связывается с каждым переключением, поэтому нет необходимости использовать click().

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

Но это тоже неаккуратно, учитывая, что вместо этого вы можете использовать метод toggle(). Кроме того, вы хотите уничтожить HTML, когда они сняты? Или это разовая сделка?

Answer 2

Вы можете сделать

    $('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 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;
           }
       }
    });

На самом деле, вы можете изменить аранжировку, проверив сначала, если элемент проверяется или не проверяется, а затем переключаться через идентификаторы .. хмм