am having a coding like this, i want to make the radio button get selected when user enters the character count match in span value, i don't have any id for span, and radio button. am having only class name and it listed the ul. I want to do this by jquery.
Enter your name: <input type="text">
<div class="attribute_list">
<ul>
<li><input type="radio" value="22" name="group_5" class="attribute_radio"><span>10</span></li>
</ul>
<ul>
<li><input type="radio" value="23" name="group_5" class="attribute_radio"><span>14</span></li>
</ul>
</div>
my jquery is like this,
<script>
$(document).ready(function(){
$("input").keyup(function(){
var y=$("input").val();
var x=$(".attribute_list span").html();
if(x==y)
{
alert(x);
}
});
});
</script>
instead of alert, i need to make that radio button get selected. any help please..
Here is JSFiddle : http://jsfiddle.net/manibtechit/DDHBE/
Try This, This is more helpfull for you
$(document).ready(function(){
$("input").keyup(function(){
var y=$("input[type=text]").val();
var x=$(".attribute_list span").html();
$('input[type=radio]').each(function(){
if($(this).next('span').html()==y)
$(this).prop('checked',true);
else
$(this).prop('checked',false);
});
});
});
Working fiddle
$(document).ready(function () {
$("input").keyup(function () {
var y = this.value;
var x = [];
$(".attribute_list span").each(function () {
x.push($(this).text());
});
if (x.indexOf(y) != -1) {
$('span').filter(':contains(' + y + ')').prev('input:radio').prop('checked', true);
}
});
});
While you've already accepted an answer, I'll offer my own approach, which is as follows:
$('input[type="text"]').on('keyup', function(){
var len = this.value.length;
$('span').filter(function(){
return $.trim($(this).text()) == '' + len;
}).prev().prop('checked',true);
});
JS Fiddle demo.
References:
filter().
jQuery.trim().
on().
prev().
text().
Related
html
<div class="adds">
<input type="text" value="" class="ip1" id="ip1" />
<input type="button" value="ADD" class="btn1" id="btn1" />
</br>
<div class="add">
<ul class="justList">
<li>police</li>
</ul>
</div>
</div>
<div class="filter">
<input type="text" value="" class="ip2" id="ip2" />
<input type="button" value="Filter" class="btn2" id="btn2" />
<div class="filter">
<ul>
</ul>
</div>
</div>
JS
$(document).ready(function(){
$("#btn1").on("click",function(){
var occ = $("#ip1").val();
if(occ.length)
{
$('<li />', {html: occ}).appendTo('ul.justList')
$("#ip1").val('');
}
});
});
Hi Here if i give "xxxx" and click "ADD" button the text ll append in the list of ul li, i need if i click filter i need only text that equal to what i gave second input box. it should filter all "xxxx" and it must show only that. any one help me.
See if this code works
$("#btn2").click(function () {
var value = $("#ip2").val();
$(".justList li").each(function () {
var curr_text = $(this).text();
if (curr_text == value)
console.log("equal");
else
$(this).hide();
});
});
Working Code:JSFIDDLE
You can try this using jQueries :contains selector :
$("#btn2").on("click", function () {
var occ = $("#ip2").val();
if (occ.length) {
$matches = $('.justList li:contains("'+occ+'")');
$matches.show();
$('.justList li').not($matches).hide();
}
else{
$('.justList li').show();
}
});
Demo
Update
If you want a case insensitive filter, you can create custome jQuery selector by adding the following script:
jQuery.expr[':'].Contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
and use it in the previous script.
Demo
For a filter, use jQuery filter. That is designed for this type of work.
The function passed to filter receives each element in turn and if you return true it retains it. if you return false it removes it.
Partial string matching:
It also uses match with a case-insensitive RegEx (so you can specify POL, pol or Pol and still match police in your example):
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Wu2x3/2/
$("#btn2").on("click", function () {
var occ = $("#ip2").val();
var $li = $('.justList li');
if (occ.length) {
// Hide all, then show matches
$li.hide();
$li.filter(function(){
// return true if case-insensitive match occurs
return $(this).text().match(new RegExp(occ, "i"));
}).show();
}
else{
// Show everything
$li.show();
}
});
This converts the text values to lowercase before comparison to make the check case-insensitive.
*Note: These solutions will also work with strings containing quotes
Whole string matching:
If you want to match the full string only (bit odd for a filter, but as you specified):
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Wu2x3/4/
$("#btn2").on("click", function () {
var occ = $("#ip2").val();
var $li = $('.justList li');
if (occ.length) {
occ = occ.toLowerCase();
// Hide all, then show matches
$li.hide();
$li.filter(function(){
// return true if case-insensitive match occurs
return $(this).text().toLowerCase() == occ;
}).show();
}
else{
// Show everything
$li.show();
}
});
I have checkboxes like so:
<ul id="searchFilter">
<li><input type="checkbox" name="price[]" class="cb_price" value="1"> $200,000 to $299,999</li>
<li><input type="checkbox" name="price[]" class="cb_price" value="3"> $300,000 to $399,999</li>
<li><input type="checkbox" name="price[]" class="cb_price" value="5"> $400,000 to $499,999</li>
<li><input type="checkbox" name="price[]" class="cb_price" value="8"> $500,000+</li>
</ul>
How would I alert the price[] to see what is checked? I am very new at jquery :(
First, you can get the checkboxes by name:
var checkboxes = $('input[name="price[]"]');
Then, to get the values of the checked ones, you can filter by the pseudo selector :checked, and then collect their values:
checkboxes.filter(":checked").map(function () {
return this.value;
}).get()
DEMO: http://jsfiddle.net/Fn9WV/
References:
jQuery().filter() - http://api.jquery.com/filter/
jQuery().map() - http://api.jquery.com/map/
You can try this:-
var selected = [];
$('[name="price[]"]:checked').each(function(checkbox) {
selected.push(checkbox);
});
Use the selector $('#searchFilter [name="price[]"]:checked') with jquery to find all the checked checkboxes with the name "price[]" in this form. This will be zero or more elements, depending on how many are checked.
Then use the jquery each() function to iterate over the found checkbox elements, and collect their values into the "checked" array. In the callback function to each(), the this points to the current element's dom node, wrap it with $(this) to create a jquery object and use .val() to retrieve the value from it.
Finally merge the items into a string, to form a comma separated list using the join() function of the "checked" array. It can be an empty string if none of the checkboxes are checked.
var checked = [];
$('#searchFilter [name="price[]"]:checked').each (function (i, e)
{
checked.push ($(this).val ());
});
alert (checked.join (','));
Notice that other answers used this.value to retrieve the "value" attribute of the checkbox instead of using $(this).val(), which is the jquery way to do it and less error prone.
Try the following:
var alert="";
$('input[type=checkbox]').each(function () {
if($(this).attr("checked") == 1)) alert += $(this).val();
if(alert.length > 1) alert(alert);
});
One way would be to set each checkbox to a specific id. Then you could use $('#' + id).is(":checked") to see if the checkbox is checked. If the checkbox is checked, you could get the range and store it in a variable. You can then return that variable.
Check this page if you need some help with the checkbox.
//get val on click
$(document).on('click', ".cb_price", function () {
if ($(this).is(':checked')) {
alert($(this).val());
}
});
//a button to call the function
$(document).on('click', ".some_button", function () {
function getitems();
});
function getitems(){
$(".cb_price").each(function () {
//
var $chk = $(this);
if ($chk.is(':checked')) {
checkboxes = checkboxes + $(this).val() + ","
}
});
alert(checkboxes);
}
I have this checkbox:
<input type="checkbox" name="foo[]" value="111111">
<input type="checkbox" name="foo[]" value="222222">
<input type="checkbox" name="foo[]" value="333333">
And i'm trying to get the value from the selected checkbox
$("input:checkbox[name^='foo']").each(function(){
var val = $(this).val();
alert(val);
});
But the event isn't called.. Am I doing something wrong?
Sorry for bad english!
Don't use each.
Use .on('change') for your event. Also this.value is easier than $(this).val().
http://jsfiddle.net/65u2t/
$("input:checkbox[name^='foo']").on('change', function () {
var val = this.value;
alert(val);
});
USe is(":checked") to check whether the checkbox is checked
$("input:checkbox[name^='foo']").click(function () {
$("input:checkbox[name^='foo']").each(function () {
if ($(this).is(":checked")) {
alert($(this).val());
}
});
});
Demo
Something very fundamental many of us for get is DOM ready:
$(function() {
$(":checkbox[name^='foo']").on('change', function () {
alert(this.value + ' --- ' + this.checked);
});
});
JS FIDDLE DEMO
here pls see my js fiddle http://jsfiddle.net/fuNd7/5/
here when i select a value from radio button it insert into input type value like when i select Neem ka thana the value of it set in
here is my jquery code for this
<script>
$(document).ready(function () {
$("#cityshow").click(function () {
$("#citybox").toggle();
});
$('#citybox input[type=radio]').click(function () {
var buttonValue = $(this).val();
$("#citybox").toggle();
$('#cityshow').html(buttonValue);
});
});
</script>
Try this:
$('#cityid').val($('input[type="radio"]:checked').val());
Working Demo
Just simple as boiling a egg. Try this:
$(document).ready(function(){
$("#cityshow").click(function(){
$("#citybox").toggle();
});
$('#citybox input[type=radio]').click(function(){
alert("sdfdsf");
var buttonValue = $(this).val();
$("#citybox").toggle();
$('#cityshow').html(buttonValue);
$('#cityid').val(buttonValue);
});
});
I have added input of cityid in your html fiddle code:
<input id="cityid" type="text" name="cityid" value="Value of select radio button here" >
I have set its type text for testing. You have set its type='hidden'
Updated Fiddle
I've written some code that allows me to determine which select option is to be checked based on what is saved to the mysql db. To be able for that to work I need to print value of a data attribute to a hidden input so that I can store the option selected.
My code is working just fine when it comes to the select options, but doesn't seem to be working with the radio buttons. I've put together a demo of the two in jsfiddle or example which can be found here:
http://jsfiddle.net/5ax5Q/
Here is the code, first the html:
<input data-checked="yes" type="radio" name="product-attr-wifi" value="100" checked />Yes
<input data-checked="no" type="radio" name="product-attr-wifi" value="200" />No
<br>
<input type="text" name="product-attr-wifi-checked" />
Here is the jquery:
var optionChecked = function (checkedInput, checkedOuput) {
$(document).ready(function () {
$(checkedInput).bind("change", function () {
var checkedValue = $(this).find(":checked").attr("data-checked");
$(checkedOuput).val(checkedValue);
});
$(checkedInput).trigger("change");
});
};
optionChecked('input[name="product-attr-wifi"]', 'input[name="product-attr-wifi-checked"]');
In the case of radio button, you don't have to use find() because this refers to the radio element which has the data attribute
var optionChecked = function (checkedInput, checkedOuput) {
$(document).ready(function () {
$(checkedInput).bind("change", function () {
var checkedValue = $(this).attr("data-checked");
$(checkedOuput).val(checkedValue);
});
$(checkedInput).filter(':checked').trigger("change");
});
};
Demo: Fiddle
Try this
var optionChecked = function (checkedInput, checkedOuput) {
$(document).ready(function () {
$(checkedInput).on("change", function () {
var checkedValue = $(this).filter(':checked').attr("data-checked");
$(checkedOuput).val(checkedValue);
});
$(checkedInput).filter(':checked').trigger("change");
});
};
DEMO