<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"/>
Related
I need your help, I'm looking for a solution of:
There is a form with several checkboxes, but only 4 of them are important. Here the html code from this 4:
<input name="opt[pool]" id="opt_pool" type="checkbox" class="searchval" value="1" onclick="submit_search()">Pool
<input name="opt[ppool]" id="opt_ppool" type="checkbox" class="searchval" value="1" onclick="submit_search()">PPool
<input name="opt[internet]" id="opt_internet" type="checkbox" class="searchval" value="1" onclick="submit_search()">Internet
<input name="opt[internetw]" id="opt_internetw" type="checkbox" class="searchval" value="1" onclick="submit_search()">InternetW
Here is the jQuery code:
function build_search(skip){
var sparam = '';
var fields = {};
$('.searchval').each(function(index){
if($(this).attr('name')==skip) {}
else if($(this).attr('type')=='checkbox'||$(this).attr('type')=='radio'){
if($(this).prop("checked")){
sparam+=$(this).attr('name')+"="+$(this).attr('value')+"&";
fields[$(this).attr('name')] = $(this).attr('value');
}
}
else if($(this).val()!=undefined&&$(this).val()!=''){
sparam+=$(this).attr('name')+"="+$(this).val()+"&";
fields[$(this).attr('name')] = $(this).val();
}
});
}
Now I would like to intervene - when clicked on pool, this checked with val=1 and ppool unchecked with val=0. And reverse when click on ppool htis checked with val=1 and pool unchecked with val=0.
This works with my code:
var boxesP = $('#opt_pool,#opt_ppool').click(function(){
boxesP.not(this).prop('checked', false);
$("#opt_pool").val( $("#opt_pool")[0].checked ? "0" : "1" );
$("#opt_ppool").val( $("#opt_ppool")[0].checked ? "0" : "1" );
});
But the problem is when i click to other checkboxes, the checked pool with val=1, remains checked but the val=0.
Where is my mistake? Thanks.
I noticed you have an existing onClick function. Would something like this work for you?
<input name="opt[pool]" id="opt_pool" type="checkbox" class="searchval" value="0" onclick="submit_search(this)">Pool
<input name="opt[ppool]" id="opt_ppool" type="checkbox" class="searchval" value="0" onclick="submit_search(this)">PPool
submit_search = function(e){
if($(e).attr('checked') == 'checked'){
$('.searchval').attr('checked',null);
$('.searchval').val(0);
$(e).attr('checked','checked');
$(e).val(1);
}else{
$(e).val(0);
}
}
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/
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>
This question already has answers here:
How do I get the label of the selected radio button using javascript
(3 answers)
Closed 8 years ago.
I have a group of radio buttons and want to get the checked radio button, then alert the text, not only the value of it. To explain more, when the user clicks the first radio button, and then submits the form, I want the browser to alert "Desktop Case." And I want to achieve this without jQuery.
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
The following works for your example. It uses CSS selectors to target the checked input. Based on its id, the appropriate label is found:
function update_order_onclick() {
var value= 'Nothing selected',
selected= document.querySelector('input[name="rad_case"]:checked'),
selection= document.querySelector('#selection');
if(selected) {
value= document.querySelector('label[for="'+selected.id+'"]').innerHTML;
}
selection.innerHTML= value;
}
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<br>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<br>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<br>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
<div id="selection"></div>
First, we create a function to loop through the radio buttons group we have, and checks if it is checked or not.
function get_radio_val(form, name)
{
var val;
var radios = form.elements[name];
for (var i =0; i < radios.length; i++)
{
if (radios[i].checked)
{
val = radios[i];
break;
}
}
return val;
}
Then we write the function that will be executed on onclick event.
function update_order_onclick()
{
var val = get_radio_val(document.form1, 'rad_case');
var val_id = val.id;
var selector = 'label[for=' + val_id + ']';
var label = document.querySelector(selector);
var label_text = label.innerHTML;
alert(label_text);
}
The thing that helped us here, is that the label for attribute has to be the same value as the radio button id and that's how we selected it in the function above.
simply do the following:
var checked = document.querySelector('input:checked');
var id = checked?checked.id:'bla';
var lab = document.querySelector('label[for='+id+']');
var lab_text = lab?lab.textContent:'';
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());
});