Develop Reference

checkbox is not working properly in html how to fix?

I have this checkbox input that I want it to call a function when its clicked
<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>
I tried different methods the only way that I got it to work was by using the onclick on the span but that would not work if the box gets checked!
Can anyone help me with this?
I can't change the layout because I have a fixed HTML that is like this for a lot of checkboxes.

This appears to be working the way you describe it with a simple "system()" function. The problem may be in your system() function.
function system(){
console.log("inside system")
}
<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>

Try this. First select the check box in JavaScript:
const $checkbox = document.querySelector('.icheck');
Then add a click event listener to it:
$checkbox.addEventListener('click', system);
This will run system when it is clicked.

How to debug non-working jQuery on mobile devices? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
This is my JavaScript code which is not executing properly. I think I am getting something wrong somewhere.
I want to add a search bar to make a search option in a responsive menu navbar. However, it is showing in desktop but not in mobile menus. That's why I am using jQuery to add this manually.
$(document).ready(function() {
$('ul').append("
<li class='fusion-custom-menu-item fusion-main-menu-search fusion-last-menu-item'>
<a class='fusion-main-menu-icon'></a>
<div class='fusion-custom-menu-item-contents'>
<form action='http://www.heilmancenter.com/' method='get' class='searchform' role='search'>
<div class='search-table'>
<div class='search-field'>
<input type='text' placeholder='Search ...' class='s' name='s' value=''>
</div>
<div class='search-button'>
<input type='submit' value='' class='searchsubmit'>
</div>
</div>
<input type='hidden' value='en' name='lang'>
</form>
</div>
</li>
");
});

remove new lines from the html: either concat all lines or put your html code in one line

The first problem is that you mispelled the function keyword, the second one is that you are creating a mult-line string, but the engine doesn't know it and interprets the second line as a instruction. You need to take a precaution, such as add a backslash at the end of any line.
jQuery(document).ready(function(){
jQuery('ul').append("<li class='fusion-custom-menu-item fusion- main-menu\
-search fusion-last-menu-item'><a class='fusion-main-menu-icon'></a><div\
class='fusion-custom-menu-item-contents'><form\
action='http://www.heilmancenter.com/' method='get' class='searchform'\
role='search'>\
<div class='search-table'>\
<div class='search-field'>\
<input type='text' placeholder='Search ...' class='s' name='s'\
value=''>\
</div>\
<div class='search-button'>\
<input type='submit' value='' class='searchsubmit'>\
</div>\
</div>\
<input type='hidden' value='en' name='lang'></form>\
</div></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Display a number of divs one at a time (like a deck of cards)

I'm making a survey form. It is supposed to display one question at a time.
Every question has a number of radio buttons. When one radio button is clicked the question will be removed (display: none; maybe with a sliding animation) and the next one will come into view.
Here's a simplified version of the form and the structure we have so far. I haven't done that much front end programming before - so I don't know if there's a simple standard way of doing this doing this with Javascript or jQuery?
Would very much appreciate some pointers in the right direction.
Here's the concept:
Display div with question #1
Click radiobutton
Hide div with question #1
Display div with question #2
Click a radiobutton
Hide div with question #2
etc...
<form method="post">
<div id="question_1">
<div class="question">
Question 1
</div>
<div class="table">
<input type="radio" value="1" name="rb_1">
<input type="radio" value="2" name="rb_1">
</div>
</div>
<div id="question_2">
<div class="question">
Question 2
</div>
<div class="table">
<input type="radio" value="1" name="rb_2">
<input type="radio" value="2" name="rb_2">
</div>
</div>
<div id="question_3">
<div class="question">
Question 3
</div>
<div class="table">
<input type="radio" value="1" name="rb_3">
<input type="radio" value="2" name="rb_3">
</div>
</div>
<div id="question_4">
<input type="submit" name="submit">
</div>
</form>

This won't be extremely user friendly as is but does what you asked and gives an idea on approach
Made adjustment to move class="question" to the outer levels where the ID's are. Setting common classes on behavioral elements is typically simpler than targeting ID's
<div id="question_1" class="question">
JS
$(function(){
$('.question :radio').change(function(){
$(this).closest('.question').hide().next().show();
});
});
There are lots of form wizard or form steps type plugins that you could use for this that offer more animation, prev/next buttons and visual step indicators etc
DEMO

Make the default for all divs hidden. When a radio button in a div is clicked, display the next div and hide that one. So in jQuery, use get elements on the divs, and set their display property to none. Store each div into an array of divs. Have a function that activates on click of a radio button. When it is clicked, go to the next div in the array from the radio button div and set its display to block.

why fadeIn() function is not working? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have done a html Login page which needs to be animated once the page loads, i have added a java script function to do the same. But nothing happens. Here is my code,
<div id="animate-wrapper" class="afterSlide">
<h1>Login</h1>
<form name="login" id="login" >
<div class="row-fluid nowrap">
<div class="input-container">
<label>User Name:</label>
<input id="d_username" name="d_username" autofocus="autofocus" type="text" placeholder="" autocomplete="off">
</div>
<div class="input-container">
<label>Password:</label>
<input id="d_password" name="d_password" type="password" placeholder="" autocomplete="off">
</div>
<div class="input-container">
<label> </label>
<button type="submit" class="btn">Login</button>
<input type="hidden" name="locale" value="en_US">
</div>
</div>
<div id="eval-users-toggle-container">
<div id="eval-users-toggle">
<div>Login as an Evaluator</div>
<div id="eval-arrow" class="closed"></div>
</div>
</div>
</form>
</div>
And Javascript,
<script type="text/javascript">
$(document).ready(function(){
$("#login-background").fadeIn(1000, function() {
$("#login-logo").addClass("afterSlide");
$("#animate-wrapper").addClass("afterSlide");
$("#d_username").focus();
$("#login-footer").addClass("afterSlide");
});
</script>

Use the Error console of your browser to tackle JavaScript problems.
First of all you are not closing the FadeIn() function parameter and the method itself.
EDIT :
Second problem here is your selector for the fadeIn(). When using an "#" as selector you are selecting by id, but you have no element with id "login-background". I;m guessing you want the whole div containing the form to fadeIn once the page is done loading. In that case you need to select the div by id "animate-wrapper".
Change you JavaScript into:
<script type="text/javascript">
$(document).ready(function(){
$("#animate-wrapper").fadeIn(1000, function() {
$("#login-logo").addClass("afterSlide");
$("#animate-wrapper").addClass("afterSlide");
$("#d_username").focus();
$("#login-footer").addClass("afterSlide");
});
});</script>
Last problem here is that the fadeIn() method is trying to fade in a element which is already visible, therefore it is not doing anything. The element you are trying to fadeIn needs to have the style element "display:none" making it not visible at first.
You can change this by adding a style for your div with id "animate-wrapper" at the top of your CSS code, setting "display:none":
#animate-wrapper {
display:none;
}
Or just adding it in the div itself (which is kind of the uglier solution):
<div id="animate-wrapper" class="afterSlide" style="display:none">
EDIT 2 :
If you want the form to slide in from left to the right, like you said in the comments you will have to modify your JavaScript a bit. jQuery does not have a method to slideIn horizontally. You will need to get the width of the wrapper, and animate show the element. Change the row of the fadeIn() method to this:
var wrapper_width = $("#animate-wrapper").width();
$("#animate-wrapper").width(0);
$("#animate-wrapper").show().animate({width: wrapper_width}, 1000, function() {

Close all the methods brackets properly and create all used ids.
Please check you import jquery (file/cdn) into you code. if no then add cdn into page
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and you can use browser console (Shift+Ctrl+J) for check javascript error.
if you are newer then use firebug for debug javascript/jquery.

check html checkbox using a button

I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.
I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.
The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.
Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.
So to clarify: I want to click on a button, say it has a value of "Fin Rot" and that checks the check box with the value "Fin Rot". And then if I clicked another button, say it has a value of "Ich" then it also checks the check box with the value "Ich"

While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>
or (if you don't want to use id on checkbox and for on label):
<label>
<input type="checkbox" name="something" value="Fin Rot">
Some text here, could be "Fin Rot"
</label>
....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.
You can test out a demo here, also showing some button-ish CSS on the label if needed.

This example uses a button to toggle the checkbox on/off.
http://jsfiddle.net/DnEL3/
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>

How about a HTML solution.
<p><input type="checkbox"
value="Another check box"
name="cboxwithlabel" id="idbox"><label
for="idbox">Another
checkbox</label></p>
<label> Creates label for the checkbox or radio buttons.

If you are looking for bootstrap solution, I just created this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here starts the component -->
<label class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="form-control btn btn-primary">
Click to toggle checkbox
</span>
</label>
<!-- Here ends the component -->
</div>
</div>
</div>