I need to check the checkbox status for my web in ASP.Net but I can't get the javascript work:
<li>
<a id="link" href="/ControlHoras">Control Horas</a>
<input onchange="favButton()" name="checkbox" type="checkbox" id="ControlHoras"/>
</li>
function favButton() {
if ($(this).is(":checked")) {
var id = this.id;
alert('checked');
} else {
alert('unchecked');
}
};
this in favButton will be the window, not the clicked checkbox, as you're using an outdated onchange event attribute.
You can improve your code and avoid the issue by attaching your event handler using an unobtrusive event handler, like this:
$('#ControlHoras').change(function() {
if ($(this).is(":checked")) {
var id = this.id;
alert('checked');
} else {
alert('unchecked');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a id="link" href="/ControlHoras">Control Horas</a>
<input name="checkbox" type="checkbox" id="ControlHoras" />
</li>
</ul>
<li>
<a id="link" href="/ControlHoras">Control Horas</a>
<input onclick="favButton()" name="checkbox" type="checkbox" id="ControlHoras"/>
</li>
The proper way to get the caller/sender is through the event argument. In fact Firefox ignores events if they don't have the event argument.
function favButton(event) {
if ($(event.currentTarget).is(":checked")) {
var id = event.currentTarget.id;
alert('checked');
} else {
alert('unchecked');
}
};
Related
I have two checkbox forms in my HTML-template, one of them allows multiple options and the other one only allows one option to be selected.
I am trying to limit the first checkbox form to only allow 2 boxes, but the current code affects both checkbox forms.
I can't use id or name since these are generated by the DB, id_something1, id_something2 etc.
How do people use to tackle this issue?
Current JS
<script>
$('input[type=checkbox]').on('change', function (e) {
if ($('input[type=checkbox]:checked').length > 2)) {
$(this).prop('checked', false);
}
});
</script>
The form I am trying to limit to 2 checkboxes
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<label>Test</label></label><input type="checkbox" name="orange" id="id_orange" checked>
</div>
</li>
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<label>Test2</label><input type="checkbox" name="banana" id="id_banana" checked>
</div>
</li>
Second form that also gets affected
<ul id="id_someform">
<li>
<label for="id_someform_1"></label><input type="checkbox name="someForm" value=1" id="id_someform_1"
</li>
<li>
<label for="id_someform_2"></label><input type="checkbox name="someForm" value=2" id="id_someform_2"
</li>
</ul>
Limit the scope of your inner selector to the surrounding form:
$('input[type=checkbox]').change(function() {
const form = $(this).closest('form');
if ( form.find('input[type=checkbox]:checked').length > 2) ) {
$(this).prop('checked', false);
}
});
Note that I've simplified your syntax with jQuery's change() method.
<script>
$('input[type=checkbox]').on('change', function (e) {
if ($('input[type=checkbox]:checked').length > 2)) {
$(this).prop('checked', false);
}
});
</script>
The above code snippet will listen for all checkbox events, instead, use different id property on your checkbox and change the selector to use the id of the checkbox you'd want to listen for the event, eg
<script>
$('input#id_orange').on('change', function (e) {
if ($('input[type=checkbox]:checked').length > 2)) {
$(this).prop('checked', false);
}
});
</script>
If the form is different you can try replacing the following line:
$('input[type=checkbox]').on('change', function (e) {
with:
$('#form-id input[type=checkbox]').on('change', function (e) {
or:
$('form.class input[type=checkbox]').on('change', function (e) {
or any other parent element that is different from one form to another.
For example:
$('#form-id input[type=checkbox]').on('change', function (e) {
if ( $('#form-id input[type=checkbox]:checked').length > 2 ) {
$(this).prop('checked', false);
}
});
I have tested it and it works for me.
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);
}
I have this code:
<fieldset class="question">
<label for="coupon_question">Do you have a coupon?</label>
<input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
<span class="item-text">Yes</span>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Your coupon:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
And I would like to show/hide the "answer" fieldset (default is hidden) after a click on the checkbox in fieldset "question" How to do that. I wasn't able to do that using the technique for a classic elemetn like:
<script>
$().ready(function(){
$('.question').live('click',function() {
$('.answer').show(300);
}
,
function(){
$('.answer').hide(200);
}
);
});
</script>
Could somebody help me how to do that using checkbox? Also if possible to null (uncheck) the checkbox when it's hidden.
Try this
$(".answer").hide();
$(".coupon_question").click(function() {
if($(this).is(":checked")) {
$(".answer").show(300);
} else {
$(".answer").hide(200);
}
});
FIDDLE
Attach onchange event to the checkbox:
<input class="coupon_question" type="checkbox" name="coupon_question" value="1" onchange="valueChanged()"/>
<script type="text/javascript">
function valueChanged()
{
if($('.coupon_question').is(":checked"))
$(".answer").show();
else
$(".answer").hide();
}
</script>
Simplest - and I changed the checkbox class to ID as well:
$(function() {
$("#coupon_question").on("click",function() {
$(".answer").toggle(this.checked);
});
});
.answer { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<fieldset class="question">
<label for="coupon_question">Do you have a coupon?</label>
<input id="coupon_question" type="checkbox" name="coupon_question" value="1" />
<span class="item-text">Yes</span>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Your coupon:</label>
<input type="text" name="coupon_field" id="coupon_field" />
</fieldset>
Try
$(document).ready(function(){
//Register click events to all checkboxes inside question element
$(document).on('click', '.question input:checkbox', function() {
//Find the next answer element to the question and based on the checked status call either show or hide method
$(this).closest('.question').next('.answer')[this.checked? 'show' : 'hide']()
});
});
Demo: Fiddle
Or
$(document).ready(function(){
//Register click events to all checkboxes inside question element
$(document).on('click', '.question input:checkbox', function() {
//Find the next answer element to the question and based on the checked status call either show or hide method
var answer = $(this).closest('.question').next('.answer');
if(this.checked){
answer.show(300);
} else {
answer.hide(300);
}
});
});
Try this
<script>
$().ready(function(){
$('.coupon_question').live('click',function()
{
if ($('.coupon_question').is(':checked')) {
$(".answer").show();
} else {
$(".answer").hide();
}
});
});
</script>
$(document).ready(function() {
$(document).on("click", ".question", function(e) {
var checked = $(this).find("input:checkbox").is(":checked");
if (checked) {
$('.answer').show(300);
} else {
$('.answer').hide(300);
}
});
});
<label onclick="chkBulk();">
<div class="icheckbox_flat-green" style="position: relative;">
<asp:CheckBox ID="chkBulkAssign" runat="server" class="flat"
Style="position:
absolute; opacity: 0;" />
</div>
Bulk Assign
</label>
function chkBulk() {
if ($('[id$=chkBulkAssign]')[0].checked) {
$('div .icheckbox_flat-green').addClass('checked');
$("[id$=btneNoteBulkExcelUpload]").show();
}
else {
$('div .icheckbox_flat-green').removeClass('checked');
$("[id$=btneNoteBulkExcelUpload]").hide();
}
I'm currently trying to code a nested checkbox. I already figured out to get the parent checkbox of a child checkbox, but whatever I try it doesn't work to get it vice versa.
I already tried to it with .children(), .find() etc, which works only when it comes to something else than a checkbox. When $(this) is a the object of a checkbox, it won't give me the previous element. How can I access to the first descendants object? Thank you !
HTML:
<ul class='main'>
<li><input type="checkbox" name="settings_overview" value="overview">Settings
<ul class="sub">
<li><input type="checkbox" name="delete" value="add">Add device</li>
<li><input type="checkbox" name="add" value="delete">Delete device</li>
</ul>
</li>
</ul>
JS:
$(document).ready(function () {
$('input:checkbox').click(function () {
var child = $(this).find(':first'); // not working
var parent = $(this).closest("ul").siblings('input:checkbox'); // works
console.log(parent);
console.log(child);
});
});
https://jsfiddle.net/v36xyfdn/11/
There are different scenerios, and those above code won't work at all times, and you might have to do fallbacks if it doesn't.
I've made the changes, perhaps this is what you were trying to achieve:
HTML:
<ul class='main'>
<li><input type="checkbox" name="settings_overview" value="overview">Settings
<ul class="sub">
<li><input type="checkbox" name="delete" value="add">Add device</li>
<li><input type="checkbox" name="add" value="delete">Delete device</li>
</ul>
</li>
</ul>
JS:
$(document).ready(function () {
$('input:checkbox').click(function () {
var nextUl = $(this).next("ul"); // not working
var children = nextUl.find("input:checkbox");
// if the clicked element was the child, then we won't get any children using above method
if(children.length == 0){
children = $(this).parents(".sub").find("input:checkbox");
}
var parent = $(this).closest("ul").siblings('input:checkbox'); // works
// Works
//console.log(parent);
//console.log(children);
// If there's a parent, then that means we're in the child
if(parent.length){
var activeChildren = 0;
children.each(function(){
if($(this).is(":checked"))
activeChildren++;
});
if(activeChildren == children.length){
parent.prop("checked", true);
} else {
parent.prop("checked", false);
}
}
// if the clicked element doesn't have any parent, means we clicked on the parent checkbox
if(parent.length == 0){
if($(this).is(":checked")){
children.each(function(){
$(this).prop("checked", true);
});
} else {
children.each(function(){
$(this).prop("checked", false);
})
}
}
});
});
JSFiddle: https://jsfiddle.net/v36xyfdn/14/
I am trying to trigger onclick function by checkbox and link. Here is Demo which works fine. But If I make change by writing onclick/onchange inside checkbox its not working.:
<input type="checkbox" id="mycheckbox" onclick="myChange();"/>
If I call like this then it works fine:
<input type="checkbox" id="mycheckbox">
document.getElementById('mycheckbox').onclick = function(){
myChange();
};
Not working :( I wanted to work in Javascript only. Not Jquery What is the reason myChange() not being called from inside input tag
Check Here your updated code works.
function myChange(){
var temp = document.getElementById('mycheckbox');
document.getElementById('container').style.display = temp.checked ? 'block' : 'none';
};
document.getElementById('loginlink').onclick = function(){
if (document.getElementById('mycheckbox').checked) {
document.getElementById('mycheckbox').checked = false ;
myChange();
} else {
document.getElementById('mycheckbox').checked = true ;
myChange();
}
}
#container {
display: none;
}
<div id="container">Check Box is Checked</div>
<br><br>
<label>
<input type="checkbox" id="mycheckbox" onclick="myChange()"/>
Show/hide
<a href="javascript:void(0)" id="loginlink" >Click Me</a>
</label>
Check Fiddle.