Активация checkbox, если значение value из input совпадает
Имею вот такую передачу значения value из checkbox в input с f_select_category. Хотелось бы узнать, реально ли реализовать?
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class='checkklass'>
<p><input type='checkbox' name='a' value='699'> 4 </p>
<p><input type='checkbox' name='a' value='700'> 5 </p>
<p><input type='checkbox' name='a' value='701'> 6 </p>
<p><input type='checkbox' name='a' value='702'> 7 </p>
<p><input type='checkbox' name='a' value='703'> 8 </p>
<p><input type='checkbox' name='a' value='704'> 9 </p>
<p><input type='checkbox' name='a' value='705'> 10 </p>
<p><input type='checkbox' name='a' value='706'> 11 </p>
<p><input type='checkbox' name='a' value='707'> 12</p>
</div>
<input name="f_select_category" type="text" maxlength="255" size="50" value="" onchange="jQuery.modal.nc_modal_confirm=true;undefined">
<script type="text/javascript">
var check=$("input[name='a']");
check.change(function(){
var names=',';
check.each(function(){if($(this).is(':checked')){names+=$(this).val()+',';}});
$("input[name='f_select_category']").val(names);
});
$("input[name='f_select_category']").val(",");
</script>
</body>
</html>
Как сделать так, что бы checkbox'ы были активированы, если в $("input[name='f_select_category']") будут значения например: ,699,702,703, |
k_DizeL,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class='checkklass'>
<p><input type='checkbox' name='a' value='699'> 4 </p>
<p><input type='checkbox' name='a' value='700'> 5 </p>
<p><input type='checkbox' name='a' value='701'> 6 </p>
<p><input type='checkbox' name='a' value='702'> 7 </p>
<p><input type='checkbox' name='a' value='703'> 8 </p>
<p><input type='checkbox' name='a' value='704'> 9 </p>
<p><input type='checkbox' name='a' value='705'> 10 </p>
<p><input type='checkbox' name='a' value='706'> 11 </p>
<p><input type='checkbox' name='a' value='707'> 12</p>
</div>
<input name="f_select_category" type="text" maxlength="255" size="50" >
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
document.querySelector("input[name='f_select_category']").addEventListener("input", function() {
var b = this.value.match(/\d+/g) || [];
[].forEach.call(document.querySelectorAll(".checkklass input"), function(a) {
a.checked = ~b.indexOf(a.value)
})
})
});
</script>
</body>
</html>
|
Спасибо конечно. Но в поле input[name='f_select_category'] уже будут какие то значения и их необходимо проверить, после отметить input[name='a'] value которых совпали
|
k_DizeL,
и что это меняет? |
k_DizeL,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class='checkklass'>
<p><input type='checkbox' name='a' value='699'> 4 </p>
<p><input type='checkbox' name='a' value='700'> 5 </p>
<p><input type='checkbox' name='a' value='701'> 6 </p>
<p><input type='checkbox' name='a' value='702'> 7 </p>
<p><input type='checkbox' name='a' value='703'> 8 </p>
<p><input type='checkbox' name='a' value='704'> 9 </p>
<p><input type='checkbox' name='a' value='705'> 10 </p>
<p><input type='checkbox' name='a' value='706'> 11 </p>
<p><input type='checkbox' name='a' value='707'> 12</p>
</div>
<input name="f_select_category" type="text" maxlength="255" size="50" value="699,702,703,">
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
var b = document.querySelector("input[name='f_select_category']").value.match(/\d+/g) || [];
[].forEach.call(document.querySelectorAll(".checkklass input"), function(a) {
a.checked = ~b.indexOf(a.value)
})
});
</script>
</body>
</html>
|
Не сработало.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class='checkklass'>
<p><input type='checkbox' name='a' value='699'> 4 </p>
<p><input type='checkbox' name='a' value='700'> 5 </p>
<p><input type='checkbox' name='a' value='701'> 6 </p>
<p><input type='checkbox' name='a' value='702'> 7 </p>
<p><input type='checkbox' name='a' value='703'> 8 </p>
<p><input type='checkbox' name='a' value='704'> 9 </p>
<p><input type='checkbox' name='a' value='705'> 10 </p>
<p><input type='checkbox' name='a' value='706'> 11 </p>
<p><input type='checkbox' name='a' value='707'> 12</p>
</div>
<input name="f_select_category" type="text" maxlength="255" size="50" value=",700,701,702," onchange="jQuery.modal.nc_modal_confirm=true;undefined">
<script type="text/javascript">
var check=$("input[name='a']");
check.change(function(){
var names=',';
check.each(function(){if($(this).is(':checked')){names+=$(this).val()+',';}});
$("input[name='f_select_category']").val(names);
});
$("input[name='f_select_category']").val();
window.addEventListener("DOMContentLoaded", function() {
document.querySelector("input[name='f_select_category']").addEventListener("input", function() {
var b = this.value.match(/\d+/g) || [];
[].forEach.call(document.querySelectorAll(".checkklass input"), function(a) {
a.checked = ~b.indexOf(a.value)
})
})
});
</script>
</body>
</html>
|
рони, да, этот рабочий вариант, спасибо большое.
|
Возникла еще одна проблема. Скрипт должен выполнится в ajax окне, которое подгружается без перезагрузки страницы. Соотвественно обработчик DOMContentLoaded несрабатывает. На что его можно заменить? Не бред, если заменить на выполнение скрипта по движению мышки? Обработчиком mousemove
|
| Часовой пояс GMT +3, время: 22:35. |