Develop Reference

how to filter my check box when I write in input in jquery in below code?

I want to filter my check box in below code.when I am writing in the input with class "js-filter-input" , I want to show only the check box with value of "js-filter-input" input .for example I write uni 1 in input and I want to show only checkbox with the value of unni 1 and the other ckeckbox are become hide.but my code don't work correctly.
$( document ).on( 'keyup', '.js-filter-input', function () {
var val;
var $content =$( this ).parent().next().find( ".search-filter-con" ).find( '.label-name' ).text() + " ";
if ( val = $( this ).val() ) {
$( '.group-checkbox .label-name', $content ).each( function () {
var patt = new RegExp( val, 'i' );
if ( patt.test( $( this ).data( 'en' ) ) || patt.test( $( this ).data( 'fa' ) ) || patt.test( $( this ).data( 'search' ) ) ) {
$( this ).parent().show();
} else {
$( this ).parent().hide();
}
} );
} else {
$( '.group-checkbox', $content ).show();
}
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-container2">
<input class="search_box js-filter-input" placeholder="" name="" type="text">
<button value="" class="search_submit" name="search_submit" type="submit"><i class="fa fa-search"></i></button>
</div>
<div class="searchList">
<div class="sampleContainer mCustomScrollbar _mCS_3 mCS-dir-rtl mCS_no_scrollbar">
<div class="mCustomScrollBox mCS-light-thin mCSB_vertical mCSB_inside">
<div class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" dir="rtl">
<div class="search-filter-con">
<div class="group-checkbox">
<div class="squaredFour">
<input type="checkbox" value="None" id="uni1" name="check" />
<label for="uni1"></label>
</div>
<label class="label-name" for="uni1" data-fa="uni1" data-en="uni1" data-search="uni1>uni1</label>
</div>
<div class="group-checkbox">
<div class="squaredFour">
<input type="checkbox" value="None" id="uni2" name="check" />
<label for="uni2"></label>
</div>
<label class="label-name" for="uni2" data-fa="uni2" data-en="uni2" data-search="uni2">uni2</label>
</div>
</div>
</div>
</div>
</div>
</div>

In your example .. .search-filter-con element has two label-name not
just one .. so the code will return both of them ..
$(this).parent().next().find(".search-filter-con").find('.label-name').text()
To get a separated text you need to use .each() to loop through the labels
$(this).parent().next().find(".search-filter-con").find('.label-name').each(function(){
console.log($(this).text() + ',');
});
I don't know what is the purpose of using $(this).parent().next() Unless you've multiple inputs and divs with the same classes and you want to refer to each one of them
To use input to filter you can use .filter() with indexOf()
$(document).on('input', '.js-filter-input', function() {
var val = $(this).val().trim();
if (val !== '') {
$(this).parent().next().find(".group-checkbox").hide().find('.label-name').filter(function(){
var FaData = $(this).data('fa');
var EnData = $(this).data('en');
return FaData.indexOf(val) > -1 || EnData.indexOf(val) > -1;
}).closest('.group-checkbox').show();
}else{
$('.group-checkbox').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-container2">
<input class="search_box js-filter-input" placeholder="" name="" type="text">
<button value="" class="search_submit" name="search_submit" type="submit"><i class="fa fa-search"></i></button>
</div>
<div class="searchList">
<div class="sampleContainer mCustomScrollbar _mCS_3 mCS-dir-rtl mCS_no_scrollbar">
<div class="mCustomScrollBox mCS-light-thin mCSB_vertical mCSB_inside">
<div class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" dir="rtl">
<div class="search-filter-con">
<div class="group-checkbox">
<div class="squaredFour">
<input type="checkbox" value="None" id="uni1" name="check" />
<label for="uni1"></label>
</div>
<label class="label-name" for="uni1" data-fa="امير كبير" data-en="امير كبير" data-search="uni1">امير كبير</label>
</div>
<div class="group-checkbox">
<div class="squaredFour">
<input type="checkbox" value="None" id="uni2" name="check" />
<label for="uni2"></label>
</div>
<label class="label-name" for="uni2" data-fa="تهران" data-en="تهران" data-search="uni2">تهران</label>
</div>
</div>
</div>
</div>
</div>
</div>

Checkbox show img

I'm trying to make it so, when you checked/uncheck a checkbox, the img appears/disappears. As of now, when I checked a box, all 4 of the images appear instead of just the one. Also I was wondering is it wrong to use document.ready multiple times? This is what I have:
Js:
$(document).ready
(
function()
{
$("#pump").hide();
$("input:checkbox").change(function() {
this.checked?$("#pump").show():$("#pump").hide();
});
});
$(document).ready
(
function()
{
$("#ski").hide();
$("input:checkbox").change(function() {
this.checked?$("#ski").show():$("#ski").hide();
});
});
$(document).ready
(
function()
{
$("#ship").hide();
$("input:checkbox").change(function() {
this.checked?$("#ship").show():$("#ship").hide();
});
});
$(document).ready
(
function()
{
$("#sun").hide();
$("input:checkbox").change(function(){
this.checked?$("#sun").show():$("#sun").hide();
});
});
Html:
<div>
<input type="checkbox"></input>
<label> Pumpkins </label>
<img src="images/pumpkins.jpg" id="pump">
<input type="checkbox"></input>
<label> Ski Resort </label>
<img src="images/ski resort.jpg" id="ski">
<input type="checkbox"></input>
<label> Bahamas </label>
<img src="images/bahamas.jpg" id="sun">
<input type="checkbox"></input>
<label> Cruise </label>
<img src="images/cruise.jpg" id="ship">
</div>

$(window).on("load", function() {
$("#pump").hide();
$("#ski").hide();
$("#sun").hide();
$("#ship").hide();
});
$("#id1").change(function() {
if(this.checked) {
$("#pump").show();
}
else{
$("#pump").hide();
}
});
$("#id2").change(function() {
if(this.checked) {
$("#ski").show();
}
else{
$("#ski").hide();
}
});
$("#id3").change(function() {
if(this.checked) {
$("#sun").show();
}
else{
$("#sun").hide();
}
});
$("#id4").change(function() {
if(this.checked) {
$("#ship").show();
}
else{
$("#ship").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id = "id1" type="checkbox"></input>
<label> Pumpkins </label>
<img src="images/pumpkins.jpg" id="pump">
<input id = "id2" type="checkbox"></input>
<label> Ski Resort </label>
<img src="images/ski resort.jpg" id="ski">
<input id = "id3" type="checkbox"></input>
<label> Bahamas </label>
<img src="images/bahamas.jpg" id="sun">
<input id = "id4" type="checkbox"></input>
<label> Cruise </label>
<img src="images/cruise.jpg" id="ship">
You need to create ids for your checkboxes.
And within your event listener for the checkbox, you have to check whether the box has been selected or not. I like tu use IF ELSE.

Getting focus on next input element anywhere on the page

<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
Consider this section for instance.
There are two textboxes (anywhere on a page).
I'm trying to set focus from the first input to the immediate next input when the user presses Enter key.
How would I achieve this in JQuery?

Try this this will help you
$(document).ready(function() {
$('input').on("keypress", function(e) {
if (e.which == 13) {
var tab = $(this).attr("tabindex") + 1
$("input[tabindex=" + tab + "]").focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>
<input type="text" tabindex="1" />
</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>
<input type="text" tabindex="2" />
</td>
</tr>
</table>
</div>

You can use the .keypress event of jQuery.
HTML
<div>
<table><tr><td><input type="text" id="first" autofocus/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text" id="second"/></td></tr></table>
</div>
jQuery block
$(document).ready(function(){
$('#first').keypress(function(e){
if(e.keyCode ==13)
{
$('#second').focus();
}
})
});
Working DEMO : https://jsfiddle.net/ne403qyb/
Hope this helps!

$(document).ready(function() {
$('input[type=text]').keypress(function(e) {
if (e.keyCode == 13) {
if ($(this).attr('class') === "last") {
$('input[type=text]').eq(0).focus()
} else {
$('input[type=text]').closest('input[type=text]').focus();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<input type="text" />
<input type="text" class="last" />
</form>

Try this :)
$(document).keypress(function(e) {
if(e.which == 13) {
var focusElem = document.activeElement;
var nextInput = $(focusElem).next().attr('id');
$("#" + nextInput).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_1" />
<input type="text" id="input_2" />
<input type="text" id="input_3" />
<input type="text" id="input_4" />

$(document).on("keydown", "#Textbox1", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
e.preventDefault();
$("#Textbox2").focus();
}
});
Woking Fiddle

You can give all of you input elements a class(you can do the same by input text tag in case you do not have the input type text element in your document on which you do not want the focus ) and can find the next input element having same class.
$(".test").keypress(function(e) {
var inputs = $(".test");
if(e.which == 13) {
var $next = inputs.filter(":gt(" + inputs.index(this) + ")").first();
$next.focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table><tr><td><input class ="test"type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>

You can try other alternative as jsfiddle,
HTML :
<div>
<table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>
JS :
$(document).on("input", "input", function(e){
if(e.which == 13){
$(this).next('.inputs').focus();
}
});

How to get checked checkbox inside in div using jquery?

I have list of checkbox inside a div few are checked. i want to change background color green of div when if checkbox is checked.
And On non checked checkbox background color should be gray.
HTML Code :
<div class="row">
<label>
<div class="col s3" style="padding:10px" id="div39">
<div>
<input type="checkbox" name="chk39" value="39" checked="">
<span>Featured Project</span>
</div>
</div>
</label>
<label>
<div class="col s3" style="padding:10px" id="div40">
<div>
<input type="checkbox" name="chk40" value="40">
<span>Specials/Discounts</span>
</div>
</div>
</label>
</div>
Jquery Code:
var check = 1;
$('div').find('input[type=checkbox]').click(function(event) {
var val = $(this).val();
if(check==1)
{
$('#div'+val).css({'background-color': 'lightgreen'});
check=0;
}else{
$('#div'+val).css({'background-color': 'lightgray'});
check=1;
}
});
$(document).ready(function($) {
var selected = [];
$('input[type=checkbox] :checked').each(function() {
alert('asd');
selected.push($(this).attr('value'));
});
});

Use .closest to find the closest element having specified selector.
Use .change listener over check-box elements than click
Use .change() to invoke change-handler initially.
Also consider Number(this.checked), It will be 0 if this.checked ==> false or otherwise.
$('div').find('input[type=checkbox]').change(function(event) {
var color = ['lightgreen', 'lightgray'];
var index = Number(this.checked);
$(this).closest('.s3').css({
'background-color': color[index]
});
}).change();
$(document).ready(function($) {
var selected = [];
$('input[type=checkbox] :checked').each(function() {
selected.push($(this).attr('value'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
<label>
<div class="col s3" style="padding:10px" id="div39">
<div>
<input type="checkbox" name="chk39" value="39" checked="">
<span>Featured Project</span>
</div>
</div>
</label>
<label>
<div class="col s3" style="padding:10px" id="div40">
<div>
<input type="checkbox" name="chk40" value="40">
<span>Specials/Discounts</span>
</div>
</div>
</label>
</div>

you can find the parent div using the closest() method.
$('div').find('input[type=checkbox]').click(function(event) {
var val = $(this).val();
var parent = $(this).closest(".col");
if(this.checked) {
parent.css({
'background-color': 'lightgreen'
});
} else {
parent.css({
'background-color': 'lightgray'
});
}
});
Fiddle

$('div').find('input[type=checkbox]').click(function(event) {
if($(this).is(':checked'))
{
$(this).closest('div').css({'background-color': 'lightgreen'});
}
else
{
$(this).closest('div').css({'background-color': 'lightgray'});
}
});
$(document).ready(function($) {
var selected = [];
$('input[type=checkbox]').not(':checked').closest('div').css({'background-color': 'lightgray'});
$('input[type=checkbox]:checked').closest('div').css({'background-color': 'lightgreen'});
});
Below is the updated fiddle
https://jsfiddle.net/cc3q2axr/

This is how I would do it:
$("input[type='checkbox']").click(function() {
if ($(this).prop("checked") === true) {
$(this).closest(".col").css("background-color", "#36ac3b");
} else {
$(this).closest(".col").css("background-color", "#999");
}
});
Here is the JSFiddle demo

Disable input if checkbox checked

i want to disable inputs when a checbox is checked.
part of html:
<div class="span1 ">
<div class="control-group" id="niedziela">
<label class="control-label" for="">Niedziela</label>
<div class="controls">
<input type="text" value="<?= $metavalue->nightlife_open_7_start ?>" name="meta[nightlife_open_7_start]" id="nightlife_open_7_start" class="m-wrap span12 timepicker-24" placeholder="">
<input type="text" value="<?= $metavalue->nightlife_open_7_end ?>" name="meta[nightlife_open_7_end]" id="nightlife_open_7_end" class="m-wrap span12 timepicker-24" placeholder="">
<input id="klient_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_end,'do ostatniego klienta') ?> value="do ostatniego klienta" name="meta[nightlife_open_7_end]" class="m-wrap span12 timepicker" placeholder=""> Do ost. klienta
<input id="zamkniete_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_start,'zamkniete') ?> value="zamkniete" name="meta[nightlife_open_7_start]" class="m-wrap span12 timepicker" placeholder=""> Zamknięte
</div>
</div>
</div>
what i want is that if checkbox with id klient_open_4_end is checked it should disable input with id="nightlife_open_7_end"
if checkbox with id="zamkniete_open_4_end" is checked should disable both inputs text areas
i tried with :
<script type="text/javascript">
$(document).ready(function($) {
$('#klient_open_4_end').change(function() {
$(this).find("#nightlife_open_7_start").attr("disabled", true);
});
});
</script>

You'll need to listen to the click event of the checkboxes. Since you've tagged the question with jQuery too,
$(function(){
$('#klient_open_4_end').on('click', function(){
if($(this).is(':checked')){
$('#nightlife_open_7_start').attr('disabled', true);
} else {
$('#nightlife_open_7_start').attr('disabled', false);
}
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
if($(this).is(':checked')){
$('.controls input:text, .controls textarea').attr('disabled', true);
} else {
$('.controls input:text, .controls textarea').attr('disabled', false);
}
});
});
Update
You can shorten this even more and use the following instead:
$(function(){
$('#klient_open_4_end').on('click', function(){
$('#nightlife_open_7_start').attr('disabled', $(this).is(':checked'));
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
$('.controls input:text, .controls textarea').attr('disabled', $(this).is(':checked'));
});
});

This is fairly simple, you can do it like this
$(document).ready(function () {
$('#klient_open_4_end').click(function () {
$('#nightlife_open_7_start').prop('disabled', function(i, v) { return !v; });
});
});
But from your snippet I'm assuming you want to run something when the page loads to disable the input as well, you can do that the same way essentially.

You can achieve this as
$('#chk').change(function(){
if($(this).is(':checked'))
$('#inp1').prop('disabled','disabled')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' id='inp1' />
<input type='text' id='inp2' />
<input type='checkbox' id='chk' />

checkout this simple code
<html>
<body>
<input type="checkbox" id="klient_open_4_end" name="klient_open_4_end"/>
<input type="text" id="nightlife_open_7_end" name="nightlife_open_7_end"/>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#klient_open_4_end").change(function(){
if($(this).prop("checked")){
$("#nightlife_open_7_end").prop("disabled",true);
}
else{
$("#nightlife_open_7_end").prop("disabled",false);
}
});
});
</script>
</html>
In above code
$("#nightlife_open_7_end").prop("disabled",true/false);
you may use
$('#nightlife_open_7_end').attr('disabled', true/false);

It is for onclick disable and enable
<!DOCTYPE html>
<html>
<body>
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="check()">Check Checkbox</button>
<button onclick="uncheck()">Uncheck Checkbox</button>
<script type="text/javascript">
function check() {
if(document.getElementById("myCheck").checked == true)
{
document.getElementById("input").disabled = true;
}
else{
document.getElementById("input").disabled = false;
}
}
</script>
</body>
</html>