We Keep Coding

How to detect event checked radio input in ajax load form

i'm using Uikit radio input (https://altair-html.tzdthemes.com/forms_regular.html).
The problem is the radio input is transforming between code and on site display
After load my form with Ajax, i want to alert value for radio choice after each change.
Here my code :
HTML :
<div class="uk-width-medium-1-2">
<h5>Radio set 1</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_1" value="Yes" data-md-icheck />
<label for="radio_opt_1" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_2" value="Non" data-md-icheck />
<label for="radio_opt_2" class="inline-label">No</label>
</span>
</div>
</div>
<div class="uk-width-medium-1-2">
<h5>Radio set 2</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_3" value="Yes" data-md-icheck />
<label for="radio_opt_3" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_4" value="Non" data-md-icheck />
<label for="radio_opt_4" class="inline-label">No</label>
</span>
</div>
</div>
Then here my JS (doesnt' work)
$(document).on('change', 'input:radio', function () {
alert('test');
});

That theme is using iCheck and according to the docs you should use:
$('input:radio').on('ifChecked', function(event) {
alert('test');
});

checkbox default checked="checked" is not working?

checkbox default checked is not working!
I tried to fix it, but I can not find where is the error here?
so on page load that is checked, after page loadet that is unchecked!?
I tried that
<div class="onoffswitch" style="margin: 0 auto;">
<input type="checkbox" class="avacheckbox onoffswitch-checkbox" id="AvButtonAutoGames" checked="checked"/>
<label class="onoffswitch-label" for="AvButtonAutoGames">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
and that
<div class="onoffswitch" style="margin: 0 auto;">
<input type="checkbox" class="avacheckbox onoffswitch-checkbox" id="AvButtonAutoGames" checked/>
<label class="onoffswitch-label" for="AvButtonAutoGames">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>

To specify the value, use the checked="true", otherwise do not specify the property.
Checked: <input type="checkbox" checked="true" /><br/>
Not checked: <input type="checkbox" />

It's hard to see, but you're using this syntax to define the checkbox value?
document.getElementById('AvButtonAutoGames').checked = true
If so, this isn't correct - but in the first JS example you have a correct the prop usage:
$('#AvButtonAutoGames').prop('checked', true)
as in HTML5, the syntax to apply is simply <input checked> or to expand for clarity <input checked="checked">. The absence of the checked attribute leads to an unchecked input field.
Simply convert your .checked=X to the functional calls and it should work

Show / hide div on page load depending on radio button value - Jquery and Ruby on Rails Simple Form

Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.
jQuery(document).ready(function() {
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
UPDATE - HTML OUTPUT OF RADIO BUTTONS:
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: block;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>

Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.
Note: To prevent flickering, give the element an initial style of display: none.
jQuery(document).ready(function() {
if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
jQuery('#denied-quote-one').show();
}
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: none;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>

JQuery : How to force the click of s specific item of a radiobox

i have a page which contains a radio box , and where , items are identified by their diffrent numric ids ; i'm recupering the id of the item that should be clicked from another job , and i wanna force the click of that specific item :
This is my HTML page :
<div id="radioCategories" class="select-list__content toggle-box" id="toggle-list-categories">
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="1">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="2">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="3">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
</div>
As you can see , i have the labels (itmes ) with the ids : 1,2,3
i have a function which is loadin dynamically the id which must be checked :
if (GetParams("cat_id")) {
var id_cat = GetParams("cat_id"); // can be 1 or 2 or 3
}
i wann develop a function which catch that "id_cat" and force the click (the event & the appearence ) on the item of the specific id received
so i started
by that :
checkSelectedCategory: function(id_cat) {
if (id) {
$("#radioCategories input:radio").attr(id, id_cat).click(function() {
alert("clicked");
});
$("input:radio:first").prop("checked", true).trigger("click");
}
}
But it didn't work , any suggestions ?

attach the event on radio buttons like this
$("#radioCategories input[type='radio']").click(function() {
alert("clicked");
});
then in the checkSelectedCategory method trigger the event like this
checkSelectedCategory:function (id_cat) {
if (id_cat){
$("input#"+id_cat).trigger("click");
}
}

Do you actually need to click it? Or just select it with JS?
var id_cat = 2;
var id = '#' + id_cat;
// Simply select it.
$( id ).prop( 'checked', true );
// Or, select it by click.
$( id ).trigger( 'click' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
1
<input type="radio" id="1">
</label>
<label>
2
<input type="radio" id="2">
</label>
<label>
3
<input type="radio" id="3">
</label>

Please remove "checkSelectedCategory" function and add following code in if condition.
if (GetParams("cat_id")) {
var id_cat = GetParams("cat_id"); // can be 1 or 2 or 3
var _this = $("#"+id_cat);
_this.prop("checked", true);
_this.trigger("click");
}
Please check below snippet. Whichever value will be entered from 1,2,3 that radio button will be checked and click event also trigger on it onchange event of input type="text".
$(document).ready(function(){
$("#dynamic_cat").on('change',function(){
var id_cat = $(this).val();
if (id_cat) {
var _this = $("#"+id_cat);
_this.prop("checked", true);
_this.trigger("click");
}
});
$("input[type='radio']").click(function(){
alert("clicked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="textbox" id="dynamic_cat" value=""/><br/>
<div id="radioCategories" class="select-list__content toggle-box" id="toggle-list-categories">
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="1">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="2">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="3">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
</div>

js - set element color on click issue

I tried to set color of element. but not succeed yet. Here i want to run 2 functions on click (addXXX,setcolor) too.
<div id="tweet">'.$tweet['text'].'</div>
<input type="radio" name="pos" value="POS"
onclick="addPOS(this.previousElementSibling.innerHTML+\' \');
$(#tweet).css(\'background-color\', \'red\');">
<span class="label label-success">Pos</span>
</input>
<input type="radio" name="pos" value="NON"
onclick="addNON(this.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML+\' \');
$(#tweet).css(\'background-color\', \'blue\');">
<span class="label label-warning">Non</span></input>
<input type="radio" name="pos" value="NEG"
onclick="addNEG(this.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML+\' \');
$(#tweet).css(\'background-color\', \'yellow\');">
<span class="label label-important">Neg</span>
</input>';

Using Jquery,
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="tweet">test</div>
<input type="radio" name="pos" value="POS" onclick="$('#tweet').css('background-color', 'yellow');">
If using normal javascript,
<div id="tweet">test</div>
<input type="radio" name="pos" value="POS" onclick="document.getElementById('tweet').style.background = 'yellow'">

Put the two functions into a separate function and call that method instead of running two method calls in the "onclick" property
<script>
function changeColor(param)
{
addPOS(param.previousElementSibling.innerHTML+\' \');
$(#tweet).css(\'background-color\', \'red\');
}
</script>
<input type="radio" name="pos" value="POS" onclick="changeColor(this)">
etc.

If you want to change the color on the div onclick.
try this.
<div id="tweet"></div>
<input type="button" onclick="document.getElementById('div').style.backgroundColor='red'"/>