I have created a code on my HTML page that their multiple checkboxes and created one button dynamically in js snippet for performing some event, but when I clicked on the button to perform that even that, then it's making calls to that event snippet two times. I wanted to know how to add the event to that button.
Here is the js code:-
$(".panel-body").on("click", '#select_none', function(event) {
$("input[name='nodelevel']:checkbox").each(function() {
this.checked = false;
});
});
Make sure there is only one parent with .panel-body class name. maybe there is two of .panel-body and it makes this happen. like this:
<div class="panel-body">
...
<div class="panel-body">
...
<!-- your selectors -->
</div>
</div>
try stoppropagation to avoid second parent event listener call:
$(".panel-body").on("click", '#select_none', function(event) {
event.stopPropagation();
$("input[name='nodelevel']:checkbox").each(function() {
this.checked = false;
});
});
EDIT : and of course you can add listener to document instead of .panel-body :)
Example:
<input class="itemClass" type="checkbox" name="Items" value="Bike"> I have a bike<br>
<input class="itemClass" type="checkbox" name="Items" value="Car" checked> I have a car<br>
<button name="submit" onclick="getValue()" value="Submit">
Then:
function getValue() {
var id;
var name;
var temp = [];
$('.itemClass').each(function () {
var sThisVal = (this.checked ? $(this).val() : "");
console.log(sThisVal);
if (this.checked) {
// $("input[name=Items]:checked").map(function () {
temp.push(sThisVal);
}
});
console.log(temp);
$('.itemCheckboxClass').prop('checked', false);
}
Related
<div class="panel-body" id="sell_in">
#foreach (var state in Model.States)
{
<div class="checkbox">
<label>
<input type="checkbox" name="SelectedStates" id="buy_#state.Value" value="#state.Value" /> #state.Text
</label>
</div>
}
</div>
I need to capture when any of the 50 checkboxes are checked. This isn't doing it, and I expect it's because the checkboxes are nested in another <div> under sell_in.
$(document).on("click", "div.sell_in", function (event) {
alert("hello");
});
(I got this solution from here: checkbox inside div. On click checked or unchecked using jquery 1.9.1)
Try to select checkbox's using input:checkbox :
$(document).on("click", "input:checkbox", function (event) {
alert("hello");
});
Or specify the ones inside div using :
$(document).on("click", "div#div_id_here input:checkbox", function (event) {
alert("hello");
});
Hoep this helps.
I'm trying to hide a specific fieldset when one of the two radio-buttons is checked in a html form.
I use two radio-buttons with the id's: 'forproject' and 'forinternship'.
<form>
<fieldset>
<legend>Sign up</legend>
<label><input type="radio" onchange="hideInternship(this)" id="forproject" name="register" >project</label>
<label><input type="radio" onchange="hideProject(this)" id="forinternship" name="register" >internship</label>
</fieldset>
<fieldset id="project">
</fieldset>
<fieldset id="internship">
</fieldset>
</form>
I wrote two JavaScript functions in an external js.file to hide one of the fieldset's when a radio-button is checked, using onchange (in the html).
function hideProject(x) {
if (x.checked)
{
document.getElementById('project').style.visibility='hidden';
document.getElementById('internship').style.visibility='visible';
}
}
function hideInternship(x) {
if (x.checked)
{
document.getElementById('internship').style.visibility='hidden';
document.getElementById('project').style.visibility='visible';
}
}
Everything is working fine, but i want to control the visibility of those fieldset's completely in the js.file. So there is no onchange or onclick in my html.
Does anyone have a tip?
document.getElementById('forproject').addEventListener('onChange', hideInternship)
function hideInternship(event) {
if (event.target.checked)
{
document.getElementById('internship').style.visibility='hidden';
document.getElementById('project').style.visibility='visible';
}
}
=]
You can "attach" a function to the onclick on your JavaScript file.
A simple (and crude) example of how this works would be to include on your JS external file (and outside of your functions) the following:
document.getElementById('forinternship').onclick = function() {
if (this.checked)
{
document.getElementById('internship').style.visibility='hidden';
document.getElementById('project').style.visibility='visible';
}
}
document.getElementById('forproject').onclick = function() {
if (this.checked)
{
document.getElementById('project').style.visibility='hidden';
document.getElementById('internship').style.visibility='visible';
}
}
With that you can remove the onclick attribute on your HTML elements.
and you can get rid of those functions (they are being created directly on the onclick on the example code).
You can also consider delegation, where a single listener is on a parent element:
window.onload = function() {
document.getElementById('f0').addEventListener('click', function(evt) {
var tgt = evt.target;
if (tgt.id == 'forproject' || tgt.id == 'forinternship') {
document.getElementById('project').style.visibility = document.getElementById('forproject').checked? 'visible':'hidden';
document.getElementById('internship').style.visibility = document.getElementById('forinternship').checked? 'visible':'hidden';
}
});
}
<form>
<fieldset id="f0">
<legend>Sign up</legend>
<label for="forproject"><input type="radio" id="forproject" name="register" >project</label>
<label for="forinternship"><input type="radio" id="forinternship" name="register" >internship</label>
</fieldset>
<fieldset id="project">Project</fieldset>
<fieldset id="internship">Internship</fieldset>
</form>
I have div that can be added and removed to the DOM if the user deleted it or adds it. The first time it gets added, the radio button on change listener fires perfectly but if the div is deleted and re-added the onChange listener no longer works.
HTML
<div id="div_container">
<input type="radio" name="gender" value="m"/>
<input type="radio" name="gender" value="f"/>
</div>
JS
$(document).on('change', 'input[type=radio][name=gender]', function(){
alert();
});
Anybody know how to resolve this?
I think that should work. I have created the fiddle with your code and it is working
$(document).on('change', 'input[type=radio][name=gender]', function () {
alert('hi');
});
Below is the fiddle link:
https://jsfiddle.net/shrawanlakhe/2ukjLfp0/7/
use function xxx(){} and .find
Call them in event "added" radio button
var radios = '<input type="radio" name="gender" value="m"/>M<input type="radio" name="gender" value="f"/>F';
function onRchange(){
$(document).find('input[type=radio][name=gender]').on('change', function(){
alert($(this).val());
});
}
var i = true;
$('#add-r').on('click',function(){
if(i){
$('#div_container').html(radios);
$(this).html('REMOVE');
i = false;
}else{
$(this).html('ADD');
$('#div_container').html('');
i = true;
}
onRchange();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_container">
</div>
<button id="add-r" >ADD</button>
I'm trying to use a pair of radio buttons to start/stop an automated horizontal scroller. I've tried several jquery techniques that I found on SO, but I haven't been able to get them to work.
Here's my latest attempt:
$( "#radAutoScroll0" ).mouseup(function() {
scrollTimer();
});
function scrollTimer(){
if($("#radAutoScroll0").is(':checked')){
// scroller code.....
}
}
<div class="scrollDiv">
<label for="autoScroll" class="autoScrollLabel">Auto Scroll</label><br />
<label for="radAutoScroll0" class="labAutoScroll">
<input type='radio' name='radAutoScroll' id='radAutoScroll0' class="rad1" checked="checked" value='on'/>On
</label>
<label for="radAutoScroll1" class="labAutoScroll">
<input type='radio' name='radAutoScroll' id='radAutoScroll1' class="rad1" value='off'/>Off
</label>
</div>
Or try to use 'click' event on your label as they wrap the radio-button:
$(document).on('click', '.labAutoScroll', function(event) {
var thisButton = $(this).prop('for');
if (thisButton == 'radAutoScroll0') {
} else {
}
});
If you have more than 2 radio buttons you can use switch(thisButton) to separate your cases.
Use the change event, and bind it to both radio buttons (using the labAutoScroll class) so it fires when you click either of them.
$('.labAutoScroll').change(function()
{
if($("#radAutoScroll0").is(':checked')){
// scroller code.....
}
});
I have custom filtering jQuery, the function is when the checkbox was checked it showing the rel value from the checkbox on div with class filter.
Meanwhile the div filter has default text write "Please choose".
What I need is when someone chooses the checkbox and then clicks the "Clear all" button it will clear the checked value, but at current state the default text from div filter "Please choose" does not appear again after clearing result.
Here is the Html code:
<div class="check">
<label><input type="checkbox" rel="A" name="A"/>a</label>
<label><input type="checkbox" rel="B" name="B"/>b</label>
<label><input type="checkbox" rel="C" name="C"/>c</label>
<label><input type="checkbox" rel="D" name="D"/>d</label>
<button class="clear -filter"onclick="$('input:checkbox').removeAttr('checked');
$('.results > div').show();
$('.textTrigger').html('');" type="reset" value="Clear all">Clear all</button>
</div>
<div class="filter">
<p class="textTrigger">Please choose</p>
</div>
Here is the jQuery:
$('div.check').delegate('input[type="checkbox"]', 'change', function()
{
var $lis = $('.results > div'),
$checked = $('input:checked');
var rels = [];
$checked.each(function()
{
rels.push($(this).attr('name'));
});
$('.textTrigger').html(rels.join(', '));
if ($checked.length)
{
var selector = $checked.map(function()
{
return '.' + $(this).attr('rel');
}).get().join('');
$lis.hide().filter(selector).show();
}
else
{
$lis.show();
}
});
And this is the link to fiddle http://jsfiddle.net/nucleo1985/LugPX/
Get rid of the onclick attribute on the button, it's not clean code. You're already using jQuery so I suggest you stick to that and move the JS logic away from inside the DOM element
Also use the $.fn.on function instead of delegate
And use this ..
$('button').on('click', function () {
$('input:checkbox').removeAttr('checked');
$('.results > div').show();
$('.textTrigger').html('Please choose');
});
JSFIDDLE