Clicking on the checkbox hides all elements with a specific title
I want when I check checkbox 1 all other checkboxes become unchecked as well as every element with a specific title inside to hide / show.
$('.chb').click(function() {
var input_id = $(this).attr('id');
$('.chb').prop('checked', false);
$(this).prop('checked', true);
$('[title="+input_id+"]').show;
$('[title!="+input_id+"]').hide;
});
I have it.
When I click a checkbox with a class .chb
, I want to uncheck all the others, but also those with title=ID OF CHECKBOX
become visible, and all the rest become invisible.
source to share
-
use the following command to insert the variable, you need to close first
'
, then use+ input_id +
and reopen the single quote:$('span[title!="' + input_id + '"]').hide();
$('span[title="'+ input_id + '"]').show();
-
the call function must be
hide()
andshow()
-
Another approach would be to use a button
radio
(thanks to @Roko C. Buljan from the comments), as you can see in option 2, you don't have to shoot and check manually.
UPDATED: both checkboxes and radio will be canceled.
Option 1: checkbox version
$('.chb').click(function() {
var input_id = this.id;
var _this = $(this);
//uncheck, show everything
if (!this.checked) {
$('span').show();
_this.siblings().prop('checked', false);
} else {
//check, show selected, hide others
$('span[title!="' + input_id + '"]').hide();
$('span[title="' + input_id + '"]').show();
_this.toggle(this.checked);
_this.siblings().prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<input type="checkbox" name="" value="1" id="1" class="chb">1<br>
<input type="checkbox" name="" value="2" id="2" class="chb">2<br>
<input type="checkbox" name="" value="3" id="3" class="chb">3<br>
<input type="checkbox" name="" value="4" id="4" class="chb">4<br>
<input type="checkbox" name="" value="5" id="5" class="chb">5<br>
<input type="checkbox" name="" value="6" id="6" class="chb">6
</form>
<span title="1">title 1<br></span>
<span title="2">title 2<br></span>
<span title="3">title 3<br></span>
<span title="4">title 4<br></span>
<span title="5">title 5<br></span>
<span title="6">title 6<br></span>
Option 2: radio button version
$('.chb').click(function() {
var input_id = this.id;
var previousValue = $(this).data('storedValue');
if (previousValue) {
$(this).prop('checked', !previousValue);
$(this).data('storedValue', !previousValue);
$('span').show();
} else {
$(this).data('storedValue', true);
$("input[type=radio]:not(:checked)").data("storedValue", false);
$('span[title!="' + input_id + '"]').hide();
$('span[title="' + input_id + '"]').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<input type="radio" name="radio" value="1" id="1" class="chb">1<br>
<input type="radio" name="radio" value="2" id="2" class="chb">2<br>
<input type="radio" name="radio" value="3" id="3" class="chb">3<br>
<input type="radio" name="radio" value="4" id="4" class="chb">4<br>
<input type="radio" name="radio" value="5" id="5" class="chb">5<br>
<input type="radio" name="radio" value="6" id="6" class="chb">6
</form>
<span title="1">title 1<br></span>
<span title="2">title 2<br></span>
<span title="3">title 3<br></span>
<span title="4">title 4<br></span>
<span title="5">title 5<br></span>
<span title="6">title 6<br></span>
Updated version:
Using this.check
to determine if a checkbox is checked.
Using siblings()
to uncheck all other checkboxes.
$('.chb').click(function() {
var input_id = this.id;
var _this = $(this);
//uncheck, show everything
if (!this.checked) {
$('li').show();
_this.siblings().prop('checked', false);
} else {
//check, show selected, hide others
$('li[title!="' + input_id + '"]').hide();
$('li[title="' + input_id + '"]').show();
_this.siblings().prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<input type="checkbox" name="" value="1" id="1" class="chb">1
<br>
<input type="checkbox" name="" value="2" id="2" class="chb">2
<br>
<input type="checkbox" name="" value="3" id="3" class="chb">3
<br>
<input type="checkbox" name="" value="4" id="4" class="chb">4
</form>
<li class="clan" title="1">
<a class="noselect"></a>
<div class="clan_content">
some cotent 1
</div>
</li>
<li class="clan" title="2">
<a class="noselect"></a>
<div class="clan_content">
some cotent 2
</div>
</li>
<li class="clan" title="3">
<a class="noselect"></a>
<div class="clan_content">
some cotent 3
</div>
</li>
<li class="clan" title="4">
<a class="noselect"></a>
<div class="clan_content">
some cotent 4
</div>
</li>
source to share
show () and hide () are methods. You call them wrong. Check the updated answer
$('.chb').click(function() {
var input_id = $(this).attr('id');
$('.chb').prop('checked', false);
$(this).prop('checked', true);
$('span[title!="' + input_id + '"]').hide();
$('span[title="'+ input_id + '"]').show();
});
source to share
Now I have something like this
$('.chb').click(function() {
var input_id = this.id;
$('.chb').prop('checked', false);
$(this).prop('checked', true);
$('li[title!="' + input_id + '"]').hide();
$('li[title="'+ input_id + '"]').show();
});
});
<li class="clan" title="<?php the_field('city',$page->ID); ?>">
<a class="noselect"><?php the_field('naziv',$page->ID); ?></a>
<div class="clan_content">
some cotent
</div>
</li>
And I want, when I click on that checkbox, only the corresponding li will show, when I click on the other, it will hide and the other will show. When I click on the same li, I want everything to be visible again.
Edit: The problem is somewhere in the id. If I set var input_id = "NewYork"; it only works for that city, but if I change the checkbox id to NewYork from Newyork it doesn't work ...
source to share