Pole wyboru jQuery zmień i kliknij zdarzenie


564

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

Tutaj .change()aktualizuje wartość pola tekstowego o status pola wyboru. Używam .click()do potwierdzenia akcji przy odznaczeniu. Jeśli użytkownik wybierze opcję anuluj, znacznik wyboru zostanie przywrócony, ale zostanie uruchomiony .change()przed potwierdzeniem.

To pozostawia niespójny stan, a pole tekstowe mówi fałsz, gdy pole wyboru jest zaznaczone.

Jak poradzić sobie z anulowaniem i zachować spójność wartości pola tekstowego ze stanem czeku?


1
Działa w FF i chrome i ma wyjaśnione zachowanie w IE 8. Dlatego może być ważne, aby pamiętać, w których przeglądarkach potrzebujesz tego do pracy i w których widzisz błąd.
kasdega

To nie jest najlepsze, ale wierzę, że to działa dla mnie tutaj: http://jsfiddle.net/Skooljester/2Xxcn/ .
ayyp

Odpowiedzi:


904

Testowane w JSFiddle i wykonuje to, o co prosisz. Ta metoda ma dodatkową zaletę uruchamiania po kliknięciu etykiety powiązanej z polem wyboru.

Zaktualizowana odpowiedź:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

Oryginalna odpowiedź:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

128
Tylko uwaga, jest o wiele szybszy w użyciu this.checkedzamiast $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5
Dakota

37
@Dakota To prawda, że ​​jest znacznie wolniejszy, ale wciąż mówimy o 600 000 operacji na sekundę. 600 razy na milisekundę. Myślę, że jeśli to zacznie powodować problemy z wydajnością na twojej stronie internetowej, może być konieczne ponowne sprawdzenie javascript;) Dobrze jest jednak zrozumieć metryki wydajności za pomocą kodu. Dzięki.
Mike U

51
@MikeU: Zgadzam się z Tobą w sprawie przedwczesnej optymalizacji, ale biorąc pod uwagę, że this.checkednapisanie + natywny javascript jest znacznie krótsze, może być ogólnie warte użycia (oprócz tego, że jest ~ 200 do 300 razy szybszy).
Lewita

11
Poleciłbym .prop () zamiast .attr (), ponieważ to ostatnie nie działa we wszystkich przypadkach i uważam, że jQuery poleca teraz .prop () teraz.
kabadisha

2
Myślę, że [to] w $ ('# textbox1'). Val (this.checked); odnosi się do dokumentu. Powinien to być $ ('# textbox1'). Val ($ ('# checkbox1'). Is (': zaznaczone'));
yurin

90

Próbny

Posługiwać się mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

Wyświetla alert podczas sprawdzania i zawsze uniemożliwia mi sprawdzenie. To jest w Chrome.
pimvdb,

taki sam jak @pimvdm. Potwierdzenie wyskakuje nawet w przypadku akcji kontrolnej (powinno pojawiać się tylko w celu odznaczenia), a wybranie opcji ok nie powoduje zaznaczenia pola.
Professor Chaos,

1
Działa, gdy używasz myszy, ale nie, jeśli sprawdzasz to za pomocą klawiatury.
frinux

3
@frinux To po prostu dlatego, że jest to pytanie związane z myszą. Proszę nie głosować na odpowiedzi ze względu na ich związek z całkowicie odrębnymi zagadnieniami. Jeśli masz problem z uruchomieniem stanu wskaźnika po zaznaczeniu pola wyboru za pomocą klawiatury, opublikuj pytanie na ten temat zamiast beztrosko głosować na odpowiedzi.
Joseph Marikle

3
Odebrane, ponieważ mousedown nie jest jedynym sposobem interakcji użytkownika z polem wyboru.
Jonathan

51

Większość odpowiedzi nie złapie (prawdopodobnie), jeśli użyjesz <label for="cbId">cb name</label>. Oznacza to, że kliknięcie etykiety spowoduje zaznaczenie pola zamiast bezpośredniego kliknięcia pola wyboru. (Nie do końca pytanie, ale często pojawiają się tutaj różne wyniki wyszukiwania)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

W takim przypadku możesz użyć:

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Przykład JSFiddle z jQuery 1.6.4

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Przykład JSFiddle z najnowszym jQuery 2.x

  • Dodano przykłady jsfiddle i HTML z etykietą klikalnego pola wyboru

1
To #OuterDivOrBody nie .OuterDivOrBody :)
Laurent Brieu

24

Cóż ... tylko w celu zaoszczędzenia bólu głowy (tutaj jest już po północy), mógłbym wymyślić:

$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
  }
});

Mam nadzieję, że to pomoże


11

Dla mnie działa to świetnie:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

4
Przeszedł przez to za pomocą wyszukiwania w sieci. Powinieneś użyć „prop” zamiast „attr” >> api.jquery.com/prop
Dr Schizo

11

Tu masz

HTML

<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

JavaScript

<script>
    $(document).ready(function () {

      $('input[id^="ProductId_"]').click(function () {

        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        }
        else {
           // do what you need here         
           alert("Unchecked");
        }
      });

  });
</script>

6

Pozbądź się zdarzenia zmiany i zamiast tego zmień wartość pola tekstowego w zdarzeniu kliknięcia. Zamiast zwracać wynik potwierdzenia, złap go w var. Jeśli to prawda, zmień wartość. Następnie zwróć var.


6

Problem polega na kliknięciu pola wyboru i sprawdzeniu wartości w tej samej pętli zdarzeń.

Spróbuj tego:

$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
        }
    }, 0);
});

Demo: http://jsfiddle.net/mrchief/JsUWv/6/


6

jeśli korzystasz z iCheck Jquery, użyj poniższego kodu

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });

5

Spróbuj tego

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

5
$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            if(!confirm("Are you sure?"))
            {
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
            }
        }
    });
});

4
// this works on all browsers.

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
    });
});

4
$('#checkbox1').click(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }
    $('#textbox1').val($(this).is(':checked')); 
});


<div id="check">
    <input type="checkbox" id="checkbox1" />
    <input type="text" id="textbox1" />
</div>

4

Późna odpowiedź, ale możesz także użyć on("change")

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" > <span>Check me!</span>


1

wystarczy użyć zdarzenia kliknięcia, moim identyfikatorem pola wyboru jest CheckAll

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    }

1

uzyskaj wartość radiową według nazwy

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });

1

Nie jestem pewien, dlaczego wszyscy to komplikują. To wszystko co zrobiłem.

if(!$(this).is(":checked")){ console.log("on"); }

-1
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })

3
Odpowiedzi zawierające tylko kod są uważane za niskiej jakości: należy wyjaśnić, co robi Twój kod i jak rozwiązuje problem. Pomoże zarówno pytającemu, jak i przyszłym czytelnikom, czy możesz dodać więcej informacji w swoim poście. Zobacz także Wyjaśnianie odpowiedzi całkowicie opartych na kodzie: meta.stackexchange.com/questions/114762/…
borchvm
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.