JQuery Only Toggle if checkbox gets checked .. possible? - javascript

I am using the code below where it toggles between 2 div's.
My problem is that I'm using a checkbox to trigger the toggle.
What I need is that...
If the checkbox is NOT check and the user checks it ... then it toggles but if the checkbox is already checked then do not toggle.
Is this possible at all?
Current code is below:
<script type="text/javascript">
$(function(){
$('.togglelink').click(function(){
$('#one').toggle();
$('#two').toggle();
});
});
</script>

What about adding that ?
$('.togglelink').click(function(){
if($(this).attr('checked')) {
return false;
}else{
$('#one').toggle();
$('#two').toggle();
}
});

<script type="text/javascript">
$(function(){
$('.togglelink').click(function(){ if (!($('.togglelink').attr('checked'))) {
$('#one').toggle();
$('#two').toggle();
}
});
});

Related

select all checkbox in header , to select all checkboxes in that column

I have used the code:
<script type="text/javascript">
$(window).load(function () {
$(document).delegate(".checkall", "click", function(event) {
$(this).closest("table").find(':checkbox').attr('checked', this.checked);
});
});
</script>
This code is working fine when I select/deselect the checkbox in header for the first time. But when I again select the checkbox then this code is not working. The checkboxes are not selected.
You should use .prop() instead of .attr(). And you have to check if an element is already checked.
...
var $checkbox = $(this).closest("table").find(':checkbox');
if ($checkbox.is(':checked')) $checkbox.prop('checked', false);
else $checkbox.prop('checked', true);
...

Checking if an element has a specific class in jquery not works

I am stopped up with a very simple functionality that worked with me many times back but not working right now.No specific errors in console also.
I am trying to check if there is a specific class for a div containing .form-content.inactive classes.I am trying to find if there is another class opened .
My codes are below mentioned
$(document).ready(function() {
if($('.form-content.inactive').hasClass('opened')){
$(".form-content a").click(function(event) {
alert('has');
});
}
});
No alerts are given on click.I am stupid now for a while :p
If your div hasn't the class opened from the beginning, you should do it this way.
$(document).ready(function() {
$(".form-content a").click(function(event) {
if($('.form-content.inactive').hasClass('opened')){
alert('has');
}
});
});
Otherwise your code could work.. When your div has the class opened already before the document became ready, only then jQuery is able to subscribe your click element to the event.
$(document).ready(function() {
if ($('.form-content.inactive').hasClass('opened')) {
$(".form-content a").click(function(event) {
alert('has');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Click!</a>
</div>
Instead of checking for opened you could use a delegate:-
$(document).ready(function() {
$('body').on('click', '.form-content.inactive.opened a', function(event) {
alert('has');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Link</a>
</div>
This will fire the click event for a if the .form-content has both classes .inactive and .opened.
If you insist on using hasClass and you have multiple .form-content then you should use this to get the closest .form-content and check for both classes.
$(".form-content a").click(function(event) {
var formContent = $(this).closest('.form-content');
if(formContent.hasClass('inactive') && formContent.hasClass('opened')){
alert('has');
}
});

Remove clicked class by click/on click in Jquery?

Here is my code, all I want is to remove the class that I clicked.
I don't understand why it does not works, I tried both
$(document).ready(function(){
$(".start").on("click", function(){
$(this).removeClass("start");
return false;
});
});
and
$(document).ready(function(){
$(".start").click( function(){
$(this).removeClass("start");
return false;
});
});
index.php
in a while loop, I have
<li>Name </li>
As the elements are created in while loop may be your class='start' element remains undetected. Try this..
$(document).ready(function(){
$(document).on('click','.start',function(){
$(this).removeClass("start");
return false;
});
});
You may have forgotten to add reference of jquery...
This works fine here:
$(document).ready(function(){
$(".start").on("click", function(){
$(this).removeClass("start");
});
});
.start
{
color:black;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>Name </li>
add jquery library to your code
visit jsfiddle http://jsfiddle.net/Jf8mp/15/jsfiddle
$(document).ready(function(){
$(document).on('click','.start',function(){
$(this).removeClass("start");
return false;
});
});
follow this also

Jquery selected tab

I wanna get selected id from my tabs. I tried anything but but I am very weak in javascript. This my tabs.
<li>Pondelok</li>
<li>Utorok</li>
<li>Streda</li>
<li>Štvrtok</li>
<li>Piatok</li>
<li>Sobota</li>
<li>Nedeľa</li>
This is my attempt, which return undefined.
<script>
var selected_tab = $(".ui-state-active").attr("id");
document.write(selected_tab);
</script>
this will alert id of tab on which you have clicked
$('.days').click(function(){
alert($(this).attr('id'));
});
if you want to write it on document use this
$('.days').click(function(){
document.write($(this).attr('id'));
});
Live Demo
http://jsfiddle.net/zgDYZ/
<script>
var selecId = "";
$('.days').click(function(){
selecId = $(this).attr('id');
});
</script>
Use selecId where ever you want..
Your are trying to to get attribute from class .ui-state-active which doesn't exist as per your markup. So your code wont work:
Try the below and this will work:
$(function() {
$("ul li").each(function() {
var selected_tab = $(this).find("a").attr("id");
alert(selected_tab);
})
});
<script type="text/javascript">
$(document).ready(function () {
$('.days').click(function () {
alert($(this).attr('id'));
});
});
</script>
another best way with validations
$('a.days').click(function(){
alert($(this).attr('id'));
});

Uncheck checkbox with jquery?

Is it possible upon page entry to modify this code to uncheck check box id LOTL even if the page is cached?
<script type="text/javascript">
function formReset()
{
document.getElementById("LOTL").reset();
}
</script>
You can use prop method:
$(document).ready(function(){
$('#LOTL').prop('checked', false);
// document.getElementById("LOTL").checked = false
})
This should do the trick:
$(document).ready(function()
{
$('#LOTL').attr('checked', false);
});
Is the LOTL element the checkbox or the form?
If it is the checkbox you might try this:
$( '#LOTL' ).removeAttr( 'checked' );
function formReset(){
document.getElementById("LOTL").checked = false;
}
Try this to uncheck
$(function() {
$('#LOTL').prop('checked', false);
});

Categories

Resources