All geek questions in one place

I need an event trigger for the switch when it is not set, because another button is checked

I need an event trigger for a switch if it is not set because another button is checked.

The following code should demonstrate my dilemma.

If you notice, there is an onchange event trigger attached to each switch and a checkbox in the html code. Theoretically, a state change from verified to unverified should trigger an onchange event.

This happens, as expected, using checkboxes. If you check it, you will receive a warning: "Your product has been changed to marked." If you uncheck it, you will receive a warning: "Your item has been changed to unchecked."

Using the switches, when you check button 1, you get, as expected, a warning: "Your item has been changed to checked," because the button has been changed from unchecked to checked. However, when you check the second button and the first switch changes from checked to unchecked, the onchange event does not fire, and the else warning does not fire.

So, this problem for me is that the event is fired when the radio button is not checked using another button that is checked?

I appreciate all help in this.

- Kenoli

    <html>
<head>
<title></title>

<script type="text/javascript">

function clickAction() {

    //alert ('Your item changed');

    if (this.checked == true) {alert ('Your item is changed to checked');}

    else if (this.checked == false) {alert('Your item is changed to unchecked');}

}



</script>

<script type="text/javascript">

function initializeToggles() {

    var button1= document.getElementById('button1');
    button1.onchange = clickAction;

    var box1= document.getElementById('box1');
    box1.onchange = clickAction;

    var box2= document.getElementById('box2');
    box2.onchange = clickAction;

}

</script>

<script type="text/javascript">window.onload = initializeToggles;</script>

</head>
<body>

<input type="radio" name="testRadio" id="button1" >Button one<br/>
<input type="radio" name="testRadio" id="button2" >Button two<br/><br/>

<input type="checkbox" name="testCheckbox" id="box1" >Box one<br/>
<input type="checkbox" name="testCheckbox" id="box2" >Box two<br/><br/>

</body>
</html>
+3
source share
5 answers

I came here to find a quick solution for this type of problem, and a null answer helped me come up with this:

$(document).ready(function(){
  $('input[type=radio]').change(function() {
    var selected = $(this);
    $('input[type=radio]').each(function() {
      if $(this).attr('id') != selected.attr('id') {
        console.log( $(this).attr('value') + ' was deselected because ' + selected.attr('value') + ' was clicked.')
      }
    });
  });
});
+6

, . , onpropertychange, , Internet Explorer.

- onchange. , , .

+2

rthbound , <table>. a <div>. jQuery 1.9. , , ASP.NET, .

$(document).ready(function(){
    $(document).on("change", "input[type='radio']", function () {
        var selected = $(this);
        $(this).closest("table").find("input[type='radio']").each(function () {
            if ($(this).attr("id") !== selected.attr("id")) {
                console.log($(this).attr("value") + " was deselected because " + selected.attr("value") + " was clicked.");
            }
        });
    });
});
0

:

:

  • - .
  • -

, .

$(function(){
    $('body').on('change', 'input[type="radio"]', function(e, by_other) {
        if (!by_other) {
          $("input[type='radio'][name='" + $(this).attr('name') + "']")
            .not(this)
            .trigger('change', true)
        }
    }
}

( coffeescript javascript ya'll.)

0

, . .change() , , .click() <.pdf > .

$('input[name="your-radio-name"]').click(function() {
    var $radios = $('input[name="your-radio-name"]');
    for (var i = 0; i < $radios.length; i++) {
        var radio = $radios[i];
        if (radio != this) {
            radio = $(radio);
            // Process for unchecked radios here
        }
    }

    // Now, process for checked radio
    // alert(this.value + ' is checked'); Or
    alert($(this).val() + ' is checked');
});
0

Source: https://habr.com/ru/post/1766478/

More articles:


All Articles