Develop Reference

JS - Unable to bind dynamic element to existing radio button

$(document).ready(function () {
debugger;
$('#IsThisTheQuestion_0').on('click', onChangeIsFire);
$('#IsThisTheQuestion_1').on('click', onChangeIsFire);
onChangeIsFire();
});
function onChangeIsFire()
{
if ( $("#IsThisTheQuestion_0" ).is(":checked") ) { //YES
onChangeIsFireYes()
}
if ( $("#IsThisTheQuestion_1" ).is(":checked") ) { //NO
onChangeIsFireNo()
}
}
function onChangeIsFireYes()
{
showHideFormField ("NextQuestion", false)
//show text
$('#IsThisTheQuestion').append(`<div id="myText" class="inLineText" style="margin-top: 20px; font-weight: bold;"> <span>{{ snippets["MyFirstText"] }}</span></div>`);
$("#NextQuestion").on('click',onChangeNextQuestion);
onChangeNextQuestion();
}
function onChangeIsFireNo()
{
showHideFormField ("NextQuestion", true)
$("#NextQuestion").on('click',onChangeNextQuestion);
onChangeNextQuestion();
// show/hide message
$("#IsThisTheQuestion_1").on("click", "#myText", function (){
debugger;
$(this).remove();
});
}
Hi
I have a powerportal website so the code inside double curly braces is liquid code, which basically contains the text.
A div '#myText' is dynamically created when radio button: IsThisTheQuestion is set to Yes (#IsThisTheQuestion_0).
The dynamic div should be removed when radio button: IsThisTheQuestion is set to No (#IsThisTheQuestion_1)
since '#myText' is a dynamic element, I am trying to bind it to the 'No' radio button. But the code below doesnt work... The element is not being removed
$("#IsThisTheQuestion_1").on("click", "#myText", function (){
debugger;
$(this).remove();
});
As the element has a class, I have been able remove "#myText" using either of the statments below
But this time understandably they are only removed when I click on the text itself.
How can I remove the div/text when I click No?
Any suggestions?
Thanks
$(document).on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});
$('body').on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});
$(document).on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});
$('body').on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});

Trigger functions from checkbox on click by clicking on a button

I have a couple of checkboxes and a button. When I click on checkbox - function is triggered. This is the desired behavior but I want to trigger it by clicking on the button. I want to have the possibility to first select checkboxes (I tried with return false and event.preventDefault but these completely switch the selection off) and then by clicking the button - trigger functions from checkboxes. Here is a link to jsfiddle:
http://jsfiddle.net/j93k2xns/6/
So for instance: I can select 3 checkboxes (nothing should happen) and after I click the button - three alerts should appear.
The code:
HTML:
<input type="checkbox" name='check[]' id="first">first</input>
<input type="checkbox" name='check[]'>second</input>
<input type="checkbox" name='check[]'>third</input>
<input type="checkbox" name='check[]'>fourth</input>
<input type="button" value="validate" id="val-button">
JS:
var check_state;
$(document).on('click','input[name="check[]"]', function(e){
if(check_state === true) {
alert('a');
} else {
return false;
}
});
$(document).on('click','#val-button', function(){
check_state = true;
});

There are a few interpretations to his question. If I'm reading it correctly, he wants to bind an arbitrary function to the checkboxes. Clicking the button should fire this event. This is how you can achieve that using custom events in jQuery:
$(function () {
$("input[name='check[]']").bind("myCustomButtonClick", function() {
if(this.checked) {
alert('a');
}
});
})
$(document).on('click','#val-button', function(){
$("input[name='check[]']").trigger("myCustomButtonClick");
});
And the associated jsfiddle: http://jsfiddle.net/3yf7ymos/

$(document).on('click','#val-button', function(){
$( 'input[name="check[]"]' ).each(function( index ) {
if($(this).is(':checked')) {
alert("a");
return true;
}
});
});

If you want to do something when the user checks a checkbox, add an event listener:
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
// do something
}
});
If the idea is run a couple of functions after the inputs are checked by clicking on a button:
function myFunction() {
if ($('input[id="something"]:checked').length == 0) {
// do something
} else if ($('input[id="something_2"]:checked').length == 0) {
// do something
}
//and so on..
}
$('#val-button').click(function() {
myFunction();
});

I have a similar inquiry. I have a number of check boxes. Each checkbox is linked to a different URL that opens a PDF form. I want my team to be able to select which forms they need by ticking the checkbox. Once they have done that, I would like a button to trigger the opening of each form based on which check box is checked. I have it so the checkbox upon being checked opens the form right away but it is very distracting. Its preferable they all get opened at once by a "button". Help. I am quite new to JavaScript so may need additional clarity.

jquery uncheck and check and vise versa checkbox of child element

Here is my html
#This will be generated throught loop
<li class="selector">
<a>
<input type="checkbox" value="test" /> test
</a>
</li>
Here is my jquery click event
$('.selector').on('click', function() {
if($(this).find('input').is(':checked')){
#uncheck the checkbox
}else{
#check the checkbox
}
});
How do I uncheck if checked and check if unchecked

Try
$(document).on('click', '.selector', function (e) {
if (!$(e.target).is('input')) {
$(this).find('input').prop('checked', function () {
return !this.checked;
});
}
});
Demo: Fiddle
Another way
$(document).on('click', '.selector', function (e) {
$(this).find('input').prop('checked', function () {
return !this.checked;
});
});
$(document).on('click', '.selector input', function (e) {
e.stopPropagation();
});
Demo: Fiddle

Try this
$('.selector').on('click', function() {
var checkbox = $(this).find(':checkbox');
if($(checkbox).is(':checked')){
$(checkbox).prop('checked', false);
}else{
#check the checkbox
$(checkbox).prop('checked', true);
}
});

I don't understand why you are trying to do this with JavaScript. If the user clicks directly on the checkbox it will automatically check/uncheck itself, but if you add code to check/uncheck it in JS that would cancel out the default behaviour so in your click handler you'd need to test that the click was elsewhere within the .selector.
Anwyay, the .prop() method has you covered:
$('.selector').on('click', function(e) {
if (e.target.type === "checkbox") return; // do nothing if checkbox clicked directly
$(this).find("input[type=checkbox]").prop("checked", function(i,v) {
return !v; // set to opposite of current value
});
});
Demo: http://jsfiddle.net/N4crP/1/
However, if your goal is just to allow clicking on the text "test" to click the box you don't need JavaScript because that's what a <label> element does:
<li class="selector">
<label>
<input type="checkbox" value="test" /> test
</label>
</li>
As you can see in this demo: http://jsfiddle.net/N4crP/2/ - clicking on the text "test" or the checkbox will toggle the current value without any JavaScript.

Javascript code does not work

I have a panel activated/deactivated with a checkbox (chk1)'On/Off'. This panel contains a checkbox (chk2) and a radio button (rbtn).
When the radio button (rbtn) is checked the checkbox must be disabled.
When the panel is disabled by unchecking the 'On/Off' checkbox, the radio button and the checkbox (chk2) are disabled.
The problem is that when I open the page with panel enabled, the code from javascript is executed, but when I open the page with panel disabled, after I enabled the panel the javascript doe not work when I check the radio button so that the chk2 became disabled.
$(document).ready(function (){
$('input[id^=rbtn]').click(function () {
SetControlEnableState($('#chk2'), $('#rbtn'));
});
function SetControlEnableState(controlToSet, control) {
if (control.is(':checked')) {
$(controlToSet).attr('disabled', 'disabled');
alert('if');
}
else {
$(controlToSet).removeAttr('disabled');
alert('else');
}
}
});
When the panel is updated the javascript code is not available anymore.

Don't use the click event on checkboxes but the change one :
$('input[id^=rbtn]').change(function () {
This way you'll get the new state. The click event is generated before the checkbox is changed.

Instead of this:
$(controlToSet).attr('disabled', 'disabled');
$(controlToSet).removeAttr('disabled');
Do this:
$(controlToSet).prop('disabled', true);
$(controlToSet).prop('disabled', false);

$(document).ready(function (){
$('input[id^=rbtn]').change(function () {
SetControlEnableState();
});
function SetControlEnableState() {
if ($('#rbtn').is(':checked')) {
$('#chk2').attr('disabled', 'disabled');
alert('if');
}
else {
$('#chk2').removeAttr('disabled');
alert('else');
}
}

Simplify the whole thing:
$(document).ready(function () {
$('input[id^=rbtn]').change(function () {
SetControlEnableState($('#chk2'), $('#rbtn'));
});
function SetControlEnableState(controlToSet, control) {
controlToSet.prop('disabled', control.is(':checked'));
}
});

try this
$(document).ready(function (){
$('input[id^=rbtn]').click(function () {
SetControlEnableState($('#chk2'), $(this));
});
function SetControlEnableState(controlToSet, control) {
if (control.is(':checked')) {
$(controlToSet).attr('disabled', 'disabled');
} else {
$(controlToSet).removeAttr('disabled');
}
}
});

select the Div without specific content

Q:
I have the following case :
Div contains a link , i wanna to just select the div without the link,i mean ,when clicking on the div i wanna specific action differs from clicking the link.through some JQuery.
the structure i work on is:(by firebug)
<div class ="rsAptContent">
sql
<a class = "rsAptDelete" href = "#" style ="visibility: hidden;">Delete</a>
</div>
the JQuery code:
<script type="text/javascript">
$(document).ready(function() {
$(".rsAptContent").click(function(e) {
ShowDialog(true);
e.preventDefault();
});
});
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function(e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>`
when i click on the link ,i don't want to execute the Jquery code , how to select the div without the link in.
thanks in advance

Are you looking for something like the stopPropagation() code?
$(".rsAptContent").click(function(e) {
e.stopPropagation();
ShowDialog(true);
return false;
});
});
That should stop the link from executing.
http://api.jquery.com/event.stopPropagation/
Edit: Distinguish between clicking the link and clicking on any part of the content except the link
$(".rsAptContent").click(function(e) {
var $target = $(e.target);
if($target.is(a){
// It's the link.
}else{
// else it's not
}
});
});

Check for the clicked target element than perform action
to get info about which element is click use below script
function whichElement(event){
var tname
tname=event.srcElement.tagName
alert("You clicked on a " + tname + " element.")
}

Try this:
$(".rsAptContent").click(function(e) {
if($(e.target).hasClass('rsAptDelete')) return false;
ShowDialog(true);
e.preventDefault();
});
});
If the target is the link the event is cancelled;

If you already have a click handler on the delete link, then just stop the event propagation there by using stopPropagation().
$(".rsAptDelete").click(function(e) {
e.stopPropagation();
});