This is my code:
$(document).on('change', '.item-checkbox', function () {
$(this).parent().find('.val-before').val();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="li-14">
<input class="val-before hidden" type="text" value="checked">
<input type="checkbox" class="item-checkbox">
</li>
<li id="li-15">
<input class="val-before hidden" type="text" value="checked">
<input type="checkbox" class="item-checkbox">
</li>
</ul>
In li-14 or not li-15, val is "checked" or "unchecked"
In li-15, val is undefined
What's wrong?
try with prev() function
use $(this).prev('.val-before').val(); instead of this $(this).parent().find('.val-before').val();
$(document).on('change', '.item-checkbox', function() {
var val = $(this).prev('.val-before').val();
console.log(val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>...
<li id="li-14">
<input class="val-before hidden" type="text" value="checked">
<input type="checkbox" class="item-checkbox">
</li>
<li id="li-15">
<input class="val-before hidden" type="text" value="checked">
<input type="checkbox" class="item-checkbox">
</li>
</ul>
Have a look at this,
$('.item-checkbox').on('change', function () {
if($(this).val() == 'checked'){
$(this).prev().val('unchecked');
$(this).val('unchecked');
console.log($(this).prev().val());
}
else {
$(this).prev().val('checked');
$(this).val('checked');
console.log($(this).prev().val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="li-14">
<input class="val-before hidden" type="text" value="">
<input type="checkbox" class="item-checkbox">
</li>
<li id="li-15">
<input class="val-before hidden" type="text" value="">
<input type="checkbox" class="item-checkbox">
</li>
</ul>
I found the reason for this problem, not that jQuery css selector does not work, because the element id is repeated.
Related
This is my HTML code:
Actually I have lots more check-boxes designed as buttons to select a room(which is represented by checkbox), So all of them getting selected is very annoying.
$("form").submit(function() {
$('.seat input:checkbox').prop("disabled", true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="qwer" action="/" method="post">
<ol class="block1">
<li class="row row--1">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="1A" />
<label for="1A">1A</label>
</li>
<li class="seat">
<input type="checkbox" id="1B" />
<label for="1B">1B</label>
</li>
<li class="seat">
<input type="checkbox" id="1C" />
<label for="1C">1C</label>
</li>
<input type="submit" value="Register" />
</form>
After I check the selected checkbox and submit the form, all other checkbox-es also gets disabled.
You also have to add :checked to only disable the checked checkboxes.
$("form").submit(function() {
$('.seat input:checkbox:checked').prop("disabled", true); //Change here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="qwer" action="/" method="post">
<ol class="block1">
<li class="row row--1">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" id="1A" />
<label for="1A">1A</label>
</li>
<li class="seat">
<input type="checkbox" id="1B" />
<label for="1B">1B</label>
</li>
<li class="seat">
<input type="checkbox" id="1C" />
<label for="1C">1C</label>
</li>
<input type="submit" value="Register" />
</form>
This is javascript:
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);
$('#textbx').val(text);
});
When I select numbers in the checkbox, It does not work in the input textbox.
JSFiddle
You can use .change event instead of .click like below,
$('.chkbx').change(function() {
// this will contain a reference to the checkbox
var text = "";
$('.chkbx:checked').each(function() {
text += $(this).val() + ',';
});
text = text.substring(0, text.length - 1);
console.log(text)
$('#textbx').val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cat_list">
<li>
<input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
<label for="1" class="selectit">1</label>
<ul class="children">
<li>
<input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
<label for="11" class="selectit">11</label>
<ul class="children">
<li>
<input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
<label for="111" class="selectit">111</label>
</li>
<li>
<input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
<label for="112" class="selectit">112</label>
</li>
</ul>
</li>
<li>
<input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
<label for="12" class="selectit">12</label>
</li>
<li>
<input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
<label for="13" class="selectit">13</label>
</li>
<li>
<input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
<label for="14" class="selectit">14</label>
</li>
<li>
<input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
<label for="15" class="selectit">15</label>
<ul class="children">
<li>
<input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
<label for="151" class="selectit">151</label>
</li>
<li>
<input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
<label for="152" class="selectit">152</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br/><br/>
<input type='text' id='textbx' value='' />
I'm trying to solve this issue. I have multiple inputs and I would like to compare if everyone has value == 0 and is also checked.
I don't know how to do it - I spend almost day searching and finding a way how to do it and don't have clue how to go further. I tried to find if one input is checked and has that value.
Thank U for Your help.
$(document).on('change','select, input', function() {
console.log('input/select has been changed');
var $this = $(this);
var $inputValue = $this.val();
console.log('input Value is ' + $inputValue);
if ($inputValue == 0 && $this.is(':checked')) {
console.log('One input is checked and has 0 value');
}
if ('all first inputs are checked and has 0 value') {
console.warn('Could U help me?');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>
I'm not completely sure what you want, but I think this can help you
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var inputs = $('input');
var inputsWithValZero = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0);
});
var inputsWithValZeroAndChecked = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0 && $(elm).is(':checked'));
});
if ($(inputsWithValZero).length == inputsWithValZeroAndChecked.length){
console.log('all checked inputs checked has 0 value');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>
<script>
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var count = 0;
$('input').each(function ( index,value) {
console.log(value);
console.log(index);
if ($(value).val() == 0 && $(value).is(':checked')) {
count = count + 1;
console.log(count+' input is checked and has 0 value');
}
});
console.log($('input').length);
if ($('ul').length == count)
console.log('all first inputs are checked and has 0 value')
}
</script>
How can I select all input checkboxes in li under a specific ul?
I have:
<ul id="something">
<li>
<input type="checkbox">
</li>
<li>
<input type="checkbox">
</li>
...
</ul>
Thanks
You can use $('ul li input[type=checkbox]')
Here is a working example, you can see that the console.log will show only input's a, b, d (because c's type is not checkbox).
checkboxes = $('ul li input[type=checkbox]')
checkboxes.each(function(e) {
console.log($(this).attr('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="something">
<li>
<input name="a" type="checkbox">
</li>
<li>
<input name="b" type="checkbox">
</li>
<li>
<input name="c" type="text">
</li>
<li>
<input name="d" type="checkbox">
</li>
</ul>
You should be able to use the ID selector for your UL like this:
var checkboxes = $("#something li input[type=checkbox]");
checkboxes.each(function(e) {
console.log($(this).attr('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="something">
<li>
<input name="a" type="checkbox">
</li>
<li>
<input name="b" type="checkbox">
</li>
<li>
<input name="c" type="text">
</li>
<li>
<input name="d" type="checkbox">
</li>
</ul>
<ul id="not-these">
<li>
<input name="a-no" type="checkbox">
</li>
<li>
<input name="b-no" type="checkbox">
</li>
<li>
<input name="c-no" type="text">
</li>
<li>
<input name="d-no" type="checkbox">
</li>
</ul>
This code will let you get all the input's html
jQuery(document).ready(function()
{
jQuery( "ul#something li" ).each(function( index ) {
var html = jQuery(this).find('input[type=checkbox]').html();
console.log(html);
});
});
Friends, I am trying to learn how I can make a 'trivial' search input.. only the HTML without consulting the database.
I have a list of eight options, and would like to make a JS function to help me hide the options that don't match the search.
http://codepen.io/pen/
<div class="search__dropdown">
<div class="search__dropdown-header">
<h3 class="search__dropdown-title">Hostel</h3>
</div>
<div class="search__dropdown-body">
<input class="search__dropdown-input search__dropdown-input--search" type="text" placeholder="Procure" />
<ul class="search__dropdown-list search__dropdown-list--hostel">
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />
<label class="search__dropdown-label" for="hostel1">one</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />
<label class="search__dropdown-label" for="hostel2">two</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />
<label class="search__dropdown-label" for="hostel3">three</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />
<label class="search__dropdown-label" for="hostel4">four</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />
<label class="search__dropdown-label" for="hostel6">five</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />
<label class="search__dropdown-label" for="hostel7">six</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />
<label class="search__dropdown-label" for="hostel8">seven</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />
<label class="search__dropdown-label" for="hostel9">eight</label>
</li>
</ul>
</div>
</div>
Attach the input event to trigger every letter change
Iterate through the list items and check if their text contains the current value
If not, hide the item
$('.search').on('input', function() {
var search = $(this).val();
var options = $('li:has([name*="hostel"])');
options.each(function() {
$(this).show();
if ($(this).find('[for*="hostel"]').text().indexOf(search) < 0) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="search__dropdown">
<div class="search__dropdown-header">
<h3 class="search__dropdown-title">Hostel</h3>
</div>
<div class="search__dropdown-body">
<input class="search search__dropdown-input search__dropdown-input--search" type="text" placeholder="Procure" />
<ul class="search__dropdown-list search__dropdown-list--hostel">
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />
<label class="search__dropdown-label" for="hostel1">one</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />
<label class="search__dropdown-label" for="hostel2">two</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />
<label class="search__dropdown-label" for="hostel3">three</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />
<label class="search__dropdown-label" for="hostel4">four</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />
<label class="search__dropdown-label" for="hostel6">five</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />
<label class="search__dropdown-label" for="hostel7">six</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />
<label class="search__dropdown-label" for="hostel8">seven</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />
<label class="search__dropdown-label" for="hostel9">eight</label>
</li>
</ul>
</div>
</div>