Say I wanted to append text to a textarea on a specific dynamic line. So for instance I have a list of checkboxes, and their id ranges from 0-i. Now I also have a textarea with the exact same number of lines as there are id ranges. So if a user clicks on checkbox id 2, I'd like the third line in my textarea to append some text.
Would you have to split the textarea first like this
var todolines = $('#todoListSave').val().split('\n'); and then append text individually or is there a better approach?
You could do something like
var $text = $('textarea');
//to initiate the value not required if the textarea value is already given
$text.val(new Array($(':checkbox').length + 1).join('\n'));
$(':checkbox').change(function() {
var split = $text.val().split('\n');
if (this.checked) {
split[this.id] += this.value;
} else {
var regex = new RegExp(RegExp.escape(this.value) + '$');
split[this.id] = split[this.id].replace(regex, '')
}
$text.val(split.join('\n'));
})
if (!RegExp.escape) {
RegExp.escape = function(value) {
return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
};
}
textarea {
min-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="0" value="1" />
<input type="checkbox" id="1" value="2" />
<input type="checkbox" id="2" value="3" />
<input type="checkbox" id="3" value="4" />
<input type="checkbox" id="4" value="5" />
<textarea></textarea>
Related
Currently my code works well with the input name, I can get the input value by input name
But I want my script to retrieve the input value with id input and not with name input?
here my code :
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
getSelectedCheckBoxwithValueText("test")
});
var getSelectedCheckBoxwithValueText = function (name1) {
var data = $('input[name="' + name1 + '"]:checked');
if (data.length > 0) {
var resultdata='' ;
data.each(function () {
var selectedValue = $(this).val();
resultdata += $('label[for="cb-' + selectedValue + '"]').text() + "<br/>";
});
$("#divchecked").html(resultdata);
}
else {
$("#divchecked").html("No Check box selected");
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
checked:
<input type="checkbox" id="c1" name="test" value="cricket" />
<label for="cb-cricket">Cricket</label>
<input type="checkbox" id="c2" name="test" value="swimming" />
<label for="cb-swimming">Swimming</label>
<input type="checkbox" id="c3" name="test" value="blog" />
<label for="cb-blog">Blog</label>
<input type="checkbox" id="c4" name="test" value="coding" />
<label for="cb-coding">Coding</label>
<br/>
<br/>
Selected checkbox:<br />
<div id="divchecked"></div>
</body>
jsfiddle: https://jsfiddle.net/showcode/L64nauo0/5/
You can use
var data = $('input[id=^"c"]:checked');
Only if the IDs not pseudos (so you really this IDs use), and do not use IDs thagt starts with c
This is a little hacker solution, but works!
There is no need to use id or name to select the checkboxes and/or their related labels. You can simplify your code like so
Select all the checkboxes from the DOM and listen to change event on them.
When the value of a checkbox changes, you get all selected checkboxes
using .filter().
And then get the text of the related labels using .map() and .get().
$(document).ready(function () {
let $checkboxes = $('input[type="checkbox"]');
$checkboxes.change(function () {
let labels = $checkboxes.filter(':checked').map(function(){
return $(this).next('label').text().trim();
}).get();
$("#divchecked").html(labels.join('<br />') || "No Check box selected");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
checked:
<input type="checkbox" id="c1" name="test" value="cricket" />
<label for="c1">Cricket</label>
<input type="checkbox" id="c2" name="test" value="swimming" />
<label for="c2">Swimming</label>
<input type="checkbox" id="c3" name="test" value="blog" />
<label for="c3">Blog</label>
<input type="checkbox" id="c4" name="test" value="coding" />
<label for="c4">Coding</label>
<br/>
<br/>
Selected checkbox:<br />
<div id="divchecked"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a search box and many checkbox elements.
Once a user types any text in the search box it should search the checkbox text and show only those checkboxes -- others should be hidden.
Here is the HTML:
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<input type="checkbox" value="column1">column1
<input type="checkbox" value="column2">column2
<input type="checkbox" value="column3">column3
<input type="checkbox" value="column4">column4
<input type="checkbox" value="column5 test">column5 test
<input type="checkbox" value="(column6)">(column6)
Now if the user types the text "col" in the search box all checkboxes should appear as "col" is present in all checkboxes.
If the user types "abc" in the search box, no checkboxes should appear as "abc" is not present in any checkboxes.
If user types text "column1" in search box only one checkbox should appear as "column1" matches only one checkbox.
Just to add another scenario if checkbox name has "column5 test". So if user types string "test" it should show "columnn5 test" checkbox and like to highlight matched text in yellow background.
If user types a special character "(" in search box then "(column6)" checkbox should be shown
Try this :
Html:
<div><input type="checkbox" value="column1">column1</div>
<div><input type="checkbox" value="column2">column2</div>
<div><input type="checkbox" value="column3">column3</div>
<div><input type="checkbox" value="column4">column4</div>
<div><input type="checkbox" value="(column5)">(column5)</div>
jQuery:
$(document).ready(function(){
$("#searchColumn").on("input",function(){
var searchTxt = $(this).val();
searchTxt = searchTxt.replace(/[.()+]/g,"\\$&");
var patt = new RegExp("^" + searchTxt,"i");
$(":checkbox").each(function(){
if(patt.test($(this).val()))
$(this).closest("div").show(500);
else
$(this).closest("div").hide(500);
})
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<div><input type="checkbox" value="column1">column1</div>
<div><input type="checkbox" value="column2">column2</div>
<div><input type="checkbox" value="column3">column3</div>
<div><input type="checkbox" value="column4">column4</div>
<div><input type="checkbox" value="(column5)">(column5)</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#searchColumn").on("input",function(){
var searchTxt = $(this).val();
searchTxt = searchTxt.replace(/[.()+]/g,"\\$&");
var patt = new RegExp("^" + searchTxt,"i");
$(":checkbox").each(function(){
if(patt.test($(this).val()))
$(this).closest("div").show(500);
else
$(this).closest("div").hide(500);
})
})
})
</script>
</body>
</html>
Simple Jquery solution using Attribute contains selector to match any elements that contains the given string value,
$(document).on("input", "#searchColumn", function(){
var v = $(this).val();
var elem = $( "input[value*='"+ v +"']" );
if(elem.val() ){
elem.show();
$(":checkbox").not(elem).hide();
}else{
$(":checkbox").hide()
}
});
Here is the fiddle - https://jsfiddle.net/sq9eknfj/2/
For Case Insensitive search -
$(document).on("input", "#searchColumn", function(){
var v = $(this).val();
var elem = $( ":checkbox" ).filter(function() {
return (new RegExp(v, 'i')).test(this.value);
});
if(elem.val()){
elem.show();
$(":checkbox").not(elem).hide();
}else{
$(":checkbox").hide()
}
});
Please try with below code I think it will help you to
$('.my-textbox').keyup(function() {
var value = $(this).val();
var exp = new RegExp('^' + value, 'i');
$("input[type='checkbox']").each(function() {
var isMatch = exp.test($(this).val());
$(this).parent().toggle(isMatch);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="" class="my-textbox" name="searchColumn" id="searchColumn"/>
<label><input type="checkbox" class="name" value="column1">column1</label>
<label><input type="checkbox" class="name" value="column2">column2</label>
<label><input type="checkbox" class="name" value="column3">column3</label>
<label><input type="checkbox" class="name" value="column4">column4</label>
First you need to change the HTML so as to be able to hide the text and the checkbox.
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<p>
<input type="checkbox" class="filter" value="column1">column1
</p>
<p>
<input type="checkbox" class="filter" value="column2">column2
</p>
<p>
<input type="checkbox" class="filter" value="column3">column3
</p>
<p>
<input type="checkbox" class="filter" value="column4">column4
</p>
Then you need a class in your CSS called hidden
.hidden {
display: none;
}
And here is some jQuery (be sure to include the jQuery library in order to use jQuery):
$(document).ready(function(){
$('#searchColumn').keyup(function(){
$('.filter').each(function(){
if($(this).val() == $('#searchColumn').val()){
$('.filter').parent().addClass('hidden');
$(this).parent().removeClass('hidden');
}
});
});
});
Here's a working Plunker.
https://embed.plnkr.co/fDzATotA41o9tuxY6vEE/
UPDATED to answer the actual question!
Here a vanilla JavaScript solution - no jQuery needed:
HTML (you need a wrapper in order to hide the label):
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<div class="checkbox"><input type="checkbox" value="column1">column1</div>
<div class="checkbox"><input type="checkbox" value="column2">column2</div>
<div class="checkbox"><input type="checkbox" value="column3">column3</div>
<div class="checkbox"><input type="checkbox" value="column4">column4</div>
CSS (hiding the checkboxes by default):
.checkbox {
display:none;
}
JavaScript (listen for input and compare the input value with the values of all the checkboxes):
var checkboxDivs = document.querySelectorAll('.checkbox');
document.querySelector('#searchColumn').addEventListener("input", function(e) {
var inputValue = e.srcElement.value;
for (var i = 0; i < checkboxDivs.length; i++) {
var checkbox = checkboxDivs[i].children[0];
if (checkbox.value.includes(inputValue) && inputValue.length != 0) {
checkboxDivs[i].style.display = 'block';
} else {
checkboxDivs[i].style.display = 'none';
}
}
});
JSFiddle: https://jsfiddle.net/a32nvnka/
<input type="checkbox" id="one" onclick="updatebox()"/>1
<input type="checkbox" id="two" onclick="updatebox()"/>2
<input type="checkbox" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>
I have 3 checkboxes and a textbox. I want that when all checkboxes are checked the textbox value would be like "123" and if one of them is not checked the value should go like "12" or "13" or "23". I dont need comma for this, I just need these to use as conditional values.
To be specific here I want that they would still be in order though they are not checked consecutively in order. I need the java script function for this
and also when they will be unchecked the textbox should not contain the value they have. like when all are checked then u uncheck #1 the value should be "23". "1" should be removed on the text. coz right now the code i have that:
var one = document.getelementbyID('one');
var textbox = document.getelementbyID('tbtb').value;
if (one.checked)
{
textbox = textbox + "1";
}
so what's happening here is everytime a checkbox is checked and unchecked simultaneously the value of textbox keep adding another "1" it goes like "2311111". PLEASE HELP :)
This will work:
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var textbox = document.getElementById('tbtb');
function updatebox(){
var str = "";
if(one.checked)
str+="1";
if(two.checked)
str+="2";
if(three.checked)
str+="3";
textbox.value = str;
}
<input type="checkbox" class="chk" id="one" onclick="updatebox()"/>1
<input type="checkbox" class="chk" id="two" onclick="updatebox()"/>2
<input type="checkbox" class="chk" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>
Please try this:
function updatebox()
{
var textbox = $('#tbtb').val();;
if($('#one').prop('checked')) {
$("#tbtb").val(textbox + "1");
}
if($('#two').prop('checked')) {
$("#tbtb").val(textbox + "1");
}
if($('#three').prop('checked')) {
$("#tbtb").val(textbox + "1");
}
}
and HTML part is:
<input type="checkbox" id="one" onclick="updatebox()"/>1
<input type="checkbox" id="two" onclick="updatebox()"/>2
<input type="checkbox" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>
Try this one.
JS:
function updatebox() {
var arrCheckbox = document.querySelectorAll('input[name=common-check]:checked');
var textBox = document.getElementById("tbtb");
var strCheck = "";
for(var i=0;i < arrCheckbox.length;i++){
strCheck+=arrCheckbox[i].getAttribute('check');
}
textBox.value = strCheck
}
HTML :
<input type="checkbox" name="common-check" id="one" onclick="updatebox()" check="1"/>1
<input type="checkbox" name="common-check" id="two" onclick="updatebox()" check="2"/>2
<input type="checkbox" name="common-check" id="three" onclick="updatebox()" check="3"/>3
<input type="text" id="tbtb"/>
Here is the Plunker
try this
javascript
function updatebox()
{
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var textbox = document.getElementById('tbtb');
var str = "";
if(one.checked)
str+=one.value;
if(two.checked)
str+=two.value;
if(three.checked)
str+=three.value;
textbox.value = str;
}
HTML
<input type="checkbox" value="1" id="one" onclick="updatebox()"/>1
<input type="checkbox" value="2" id="two" onclick="updatebox()"/>2
<input type="checkbox" value="3" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>
Hi I have the following html code
<td>
Question1
<input type="radio" value="1" name="1" id="1_1">Agree
<input type="radio" value="2" name="1" id="1_2">Dis-Agree
<input type="text" size="30" name="1[answer]" id="1_answer" class="answer">
</td>
<td>
Question2
<input type="radio" value="1" name="2" id="2_1">Agree
<input type="radio" value="2" name="2" id="2_2">Dis-Agree
<input type="text" size="30" name="2[answer]" id="2_answer" class="answer">
</td>
<input type="text" size="30" name="feedback[answers]" id="feedback_answers">
What I want to do is
When user clicks on the radio button it gets the selected value and
set in text box along with the question (Ex: 1_answer)
Meanwhile I want to append the same value to the 'feedback_answers'
text box
I was manage to the first steps, but I cannot get the values from Ex: 1_answer text box to 'feedback_answers' text box, following is my JQuery code
$(document).ready(function() {
$("input:radio[type=radio]").click(function() {
id = $(this).attr('id');
ids = id.split("_")
question_id = ids[0]
answer_id = ids[1]
$('#' + question_id + '_answer').val(answer_id);
$(".answer").each(function(index, value){
alert(this.val)
});
});
can someone help me, I want to loop through all the 'asnwer' text boxes (Ex: 1_answer) and get all of them to 'feedback_answers' text box.
thanks in advance
Try This
$(document).ready(function() {
var feedback_answers = $("#feedback_answers");
$("input[type=radio]").click(function() {
var id = $(this).attr('id');
var ids = id.split("_")
var question_id = ids[0]
var answer_id = ids[1];
var answers = [];
$('#' + question_id + '_answer').val(answer_id);
$(".answer").each(function(index, value){
//alert($(this).val())
answers.push($(this).val());
});
feedback_answers.val(answers.join());
});
I am trying to parse through all elements in a single radio button (or check box).
In my code, $(this) refers to a specific radio button or checkbox...
What I want is to create a function using 'each' which parses through all values of a radio or check box..
The code I am trying to create is shown below--
...SOME CODE....
...SOME CODE....
else if (($(this).attr('type')=="radio")||($(this).attr('type')=="checkbox"))
{
$(this).<WHAT SHOULD BE THE CODE HERE>.each(function(){
alert( " Option value=" + $(this).val() );
});
}
What should be the code at the place indicated above, so that I can parse through all elements of a radio button/check box. Also, I want to obtain both text values and assigned values, I suppose this can be done using text() and val() respectively?
EXAMPLE OF A CHECK BOX --
<input type="checkbox" name="color" value="red1">
Red<br>
<input type="checkbox" name="color" value="yellow1">
Yellow<br>
<input type="checkbox" name="color" value="blue1">
Blue<br>
<input type="checkbox" name="color" value="orange1">
Orange<br>
<input type="checkbox" name="color" value="green1">
Green<br>
<input type="checkbox" name="color" value="purple1">
Purple<br>
As can be seen from above example, for each element of the checkbox, using val() should fetch "red1", "yellow1", "blue1" and so on...while using text() should fetch "Red" "Yellow" "Blue" and so on...
$('input[type="checkbox"], input[type="radio"]').each(function(){
$('[name="' + $(this).prop('name') + '"]').each(function(){
// Do stuff here with $(this).val();
// Should be red1, yellow1, blue1, ...
});
});
Why not change the HTML to read:
<input type="checkbox" name="color" value="red1"/><span>Red</span><br />
<input type="checkbox" name="color" value="yellow1"/><span>Yellow</span><br />
<input type="checkbox" name="color" value="blue1"/><span>Blue</span><br />
<input type="checkbox" name="color" value="orange1"/><span>Orange</span><br />
<input type="checkbox" name="color" value="green1"/><span>Green</span><br />
<input type="checkbox" name="color" value="purple1"/><span>Purple</span><br />
Then read in the .next('span').
alert( " Value=" + $(this).val() + " Text: " + $(this).next('span').text());
I guess you could do the same with your Radio's
How about this solution for finding input values / text pairs:
var inputs = document.getElementsByTagName('input'), text, value;
for(var i = 0, l=inputs.length;i<l;++i){
if(inputs[i].type != 'checkbox'&&inputs[i].type != 'radio'){
continue;
}else{
text = inputs[i].nextSibling.nodeValue;
value = inputs[i].value;
}
}