Вход

Просмотр полной версии : checkbox и textarea

Жекаизжека
26.04.2013, 00:56
Ребят ситуация такая, есть N - число checkbox-ов и одно поле textarea. Суть в том, чтобы при выборе checkbox значение(value) добавлялось в textarea через "," , а если галочка снята,то удалялось. Можете помочь решить такую задачку :-?
Жекаизжека
26.04.2013, 02:39
вот сварганил, только не могу сделать условие, если галки нет, то удалялась строчка

<html>
<body>
<textarea id = "postarea" rows = "5" cols = "120" name = "txt"></textarea>
<input type="checkbox" onchange="javascript:tag_add(postarea, '{$brand->image}', ';')"/><img src='../files/brands/{$brand->image}' >
</body>

<script>
function tag_add(obj, str1, str2) {
if(document.selection) { // Для IE
var s = document.selection.createRange();
if (s.text) {
s.text = str1 + s.text + str2
}
} else { // Opera, FireFox, Chrome
var start = obj.selectionStart;
var end = obj.selectionEnd;
s = obj.value.substr(start,end-start);
obj.value = obj.value.substr(0, start) + str1 + s + str2 + obj.value.substr(end)
}
}
</script>
</html>
rgl
26.04.2013, 11:20
Так, что ли?

<html>
<body>
<textarea id = "postarea" rows = "5" cols = "120" name = "txt"></textarea>
<br><br>
<input type="checkbox" onchange="tag_add(postarea, 'one', this.checked)"/>one<br>
<input type="checkbox" onchange="tag_add(postarea, 'two', this.checked)"/>two<br>
<input type="checkbox" onchange="tag_add(postarea, 'three', this.checked)"/>three<br>

<script>
function tag_add(obj, str, add) {
if( add ) {
if( obj.value ) {
if( obj.value.indexOf( str) < 0 )
obj.value += ";" + str;
} else {
obj.value = str;
}
} else {
var re = new RegExp( "(;)?"+str+"(;)?" );
obj.value = obj.value.replace( re, function( x, l, r ){ return l && r ? ";" : ""; } );
}
}
</script>
</body>
</html>
Жекаизжека
26.04.2013, 12:14
да, оно самое, а могли бы еще один момент подсказать, если в textarea уже есть текст со значение 'one', 'two', тогда бы checkbox был бы с галкой, а если нет значения то нет галки

что то вроде этого

<html>
<body>
<textarea id = "postarea" rows = "5" cols = "120" name = "txt">one;two</textarea>

<br><br>
<input type="checkbox" onchange="tag_add(postarea, 'one', this.checked)"/>one<br>
<input type="checkbox" onchange="tag_add(postarea, 'two', this.checked)"/>two<br>
<input type="checkbox" onchange="tag_add(postarea, 'three', this.checked)"/>three<br>

<script>
function tag_add(obj, str, add) {
if( add ) {
if( obj.value ) {
if( obj.value.indexOf( str) < 0 )
obj.value += ";" + str;
} else {
obj.value = str;
}
} else {
var re = new RegExp( "(;)?"+str+"(;)?" );
obj.value = obj.value.replace( re, function( x, l, r ){ return l && r ? ";" : ""; } );
}
}

</script>
</body>
</html>
ksa
26.04.2013, 14:30
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
label {
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('#options input:checkbox').change(function (){
setValue();
});
loadData();
});
function setValue(){
var dlm='';
var val='';
$('#options input:checkbox').each(function (){
if (!this.checked) return;
val=val+dlm+this.value;
dlm=';';
});
$('#txt').val(val);
};
function loadData(){
var a=$('#txt').val();
a=a.split(';');
for (i=0; i<a.length; i++) {
$('input[value="'+a[i]+'"]').attr('checked',true);
};
};
</script>
</head>
<body>
<div>
<textarea id='txt' rows = "5" cols = "120" name = "txt">one;two</textarea>
</div>
<div id='options'>
<label>
<input type="checkbox" value='one' onchange="test();"/>one
</label>
<label>
<input type="checkbox" value='two' onchange="test();"/>two
</label>
<label>
<input type="checkbox" value='three' onchange="test();"/>three
</label>
</div>
</body>
</html>
Жекаизжека
26.04.2013, 16:09
то что надо, спасибо большое :)
rgl
26.04.2013, 18:38
А в чем смысл таких действий на клиенте? Начальный текст известен на сервере, значит там и добавить куда надо checked
Жекаизжека
27.04.2013, 20:58
есть более 60 чекбоксов с разными параметрами для клиента, которые храняться в базе данных, чтобы не горадить кучу ячеек для каждого чекбокса, решил запихнуть их в одну ячейку, поле textarea скрыто от пользователя :)
Жекаизжека
28.04.2013, 02:42
rgl, можешь помочь еще в одном моменте, как разбить данные(разделенные ; ) из ячейки и сгенерировать переключатели (radiobutton) с value значениями, чтобы создалось такое же количество переключателей.
Делал через split как то не выщло (
ksa
29.04.2013, 08:27
как разбить данные(разделенные ; )
..
Делал через split как то не выщло (
Бивас, тест! (с)

var a='1;2;3;4;5';
a=a.split(';');
alert(a);
Таки работает... :)
Жекаизжека
13.05.2013, 01:01
аха...а как добиться создание radiobutton-ов с value а...такое же количество сколько там значений?(
ksa
13.05.2013, 09:59
Мая твая не панимайт...
Жекаизжека
13.05.2013, 11:43
Быват..)
Есть получаемые значения "green;black;red" надо чтобы создавались


<input type="radio" name="group" value="green">green<br>
<input type="radio" name="group" value="black">black<br>
<input type="radio" name="group" value="red">red<br>


Если значений N количество то и radio должно столько же
ksa
13.05.2013, 15:36
И в чем проблема?

Есть получаемые значения "green;black;red"
И погнал в цикле создавать что нужно...
Жекаизжека
13.05.2013, 16:34
<html>
<head>
<title>javascript for</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<script type='text/javascript'>
var a='1;2;3;4;5;';
a=a.split(';');

for (i=1; i<a.length; i++) {
document.write (i+'<input type="radio" value="'i+'"><br />');
}
</script>
</body>
</html>



только не могу понять как чтобы там появлялось у radiobutton значение value="i"
animhotep
13.05.2013, 18:07
<html>
<head>
<title>javascript for</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<script type='text/javascript'>
var a='1;2;3;4;5;';
a=a.split(';');

for (i=1; i<a.length; i++) {
document.write (i+'<input type="radio" value="'+i+'"><br />');
}
</script>
</body>
</html>
Жекаизжека
13.05.2013, 18:34
<html>
<head>
<title>javascript for</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type='text/javascript'>
var names = 'Маша, Петя, Марина, Василий';
var arr = names.split(', ');
for (var i=0; i<arr.length; i++) {
document.write (arr[i]+'<input type="radio" value="'+arr[i]+'"><br />');
}
</script>
</body>
</html>

Большое спасибо добился того что нужно ))
Ramzes94
13.10.2016, 11:19
Подскажи пожалуйста, как к checkbox добавить текcтовый input.

Суть работы скрипта:

Если checkbox отмечен, то необходимо заполнить текстовый input выделенный красным.
Если же нет то все по умолчанию.
После заполнения текстового input, отмеченное значение попадает в textarea

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
label {
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('#options input:checkbox').change(function (){
setValue();
});
loadData();
});
function setValue(){
var dlm='';
var val='';
$('#options input:checkbox').each(function (){
if (!this.checked) return;
val=val+dlm+this.value;
dlm=';';
});
$('#txt').val(val);
};
function loadData(){
var a=$('#txt').val();
a=a.split(';');
for (i=0; i<a.length; i++) {
$('input[value="'+a[i]+'"]').attr('checked',true);
};
};
</script>
</head>
<body>
<div>
<textarea id='txt' rows = "5" cols = "120" name = "txt">one;two</textarea>
</div>
<div id='options'>
<label>
<input type="checkbox" value='one' onchange="test();"/>one
</label>
<label>
<input type="checkbox" value='two' onchange="test();"/>two
</label>
<label>
<input type="checkbox" value='three' onchange="test();"/>three
</label>
</div>
</body>
</html>