jQuery-selectievakje wijzigen en op gebeurtenis klikken

$(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"/>

Antwoord 1, autoriteit 100%

Getest in JSFiddleen doet wat u vraagt. Deze aanpak heeft als bijkomend voordeel geactiveerd wanneer er op een label wordt geklikt dat is gekoppeld aan een selectievakje.

Bijgewerkt antwoord:

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

Oorspronkelijk antwoord:

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

Antwoord 2, autoriteit 9%

Demo

Gebruik mousedown

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

Antwoord 3, autoriteit 5%

De meeste antwoorden zullen het (vermoedelijk) niet bevatten als u <label for="cbId">cb name</label>gebruikt. Dit betekent dat wanneer u op het label klikt, het selectievakje wordt aangevinkt in plaats van direct op het selectievakje te klikken. (Niet precies de vraag, maar verschillende zoekresultaten komen hier vaak voor)

<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>

In dat geval zou je kunnen gebruiken:

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

JSFiddle-voorbeeld met 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());
    }
});

JSFiddle-voorbeeld met de nieuwste jQuery 2.x

  • Jsfiddle-voorbeelden en de html toegevoegd met het aanklikbare selectievakjelabel

Antwoord 4, autoriteit 3%

Nou .. alleen om hoofdpijn te besparen (het is hier na middernacht), zou ik kunnen bedenken:

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

Hopelijk helpt het


Antwoord 5

Voor mij werkt dit prima:

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

Antwoord 6

Hier ben je

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>

Antwoord 7

Laat antwoord, maar je kunt ook on("change")

. gebruiken

$('#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>

Antwoord 8

Verwijder de change-gebeurtenis en wijzig in plaats daarvan de waarde van het tekstvak in de click-gebeurtenis. In plaats van het resultaat van de bevestiging terug te sturen, vang het in een var. Als het waar is, wijzigt u de waarde. Geef dan de var terug.


Antwoord 9

Checkbox klikken en controleren op de waarde in dezelfde gebeurtenislus is het probleem.

Probeer dit:

$('#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/


Antwoord 10

als je de iCheck JQuery gebruikt, gebruik dan de onderstaande code

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

Antwoord 11

Probeer dit

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

Antwoord 12

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

Antwoord 13

// 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;
    });
});

Antwoord 14

$('#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>

Antwoord 15

Krijg radio-waarde door naam

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

Antwoord 16

Ik ben niet zeker waarom iedereen dit zo gecompliceerd maakt.
Dit is alles wat ik deed.

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

Antwoord 17

Gebruik gewoon gewoon de klik-gebeurtenis
Mijn selectievakje ID is checkall

    $('#CheckAll').click(function () {
        if ($('#CheckAll').is(':checked') == true) {
             alert(";)");
      }
    });

Antwoord 18

Probeer

checkbox1.onclick= e => {
  if(!checkbox1.checked) checkbox1.checked = !confirm("Are you sure?");
  textbox1.value = checkbox1.checked;
}
<input type="checkbox" id="checkbox1" /><br />
<input type="text" id="textbox1" value='false'/>

Antwoord 19

Probeer dit:

   let checkbox = document.getElementById('checkboxId');
    if (checkbox.checked != true)
    {
        alert("select checkbox");
    }

Antwoord 20

$("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger
        }
        else {
        }
    })

Other episodes