jquery - 如何更改单选按钮单击时文本框的文本方向?

标签 jquery html css

我有这一小段代码,但无法解决方向问题。我有一个始终向左方向的文本字段。我有 2 个单选按钮,“右”和“左”。当我单击“右”时,它显示“右”单选按钮的值,与“左”相同。我希望当我单击“右”时,文本显示在文本字段的右侧 dir="rtl",当单击“左”时,文本显示 dir= “ltr”

这是代码:

$(function() {
  $('input[name="radio-1"]').on('change', function() {
    $('input[name="direction"]').val($(this).val());
  });
});
.toggler {
  height: 50px;
  position: absolute;
}
.toggler2 {
  position: absolute;
}
<!doctype html>
<html lang="en">

<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>
  <legend>Choose direction:</legend>
  <input type="radio" class="click" name="radio-1" id="radio-1" value="Right">
  <label for="radio-1">Right</label>
  <input type="radio" class="click" name="radio-1" id="radio-2" value="Left">
  <label for="radio-2">Left</label>
  <div class="toggler2">
    <input type="text" name="direction">
  </div>
</body>

</html>

工作代码:https://jsfiddle.net/pk0vnkLn/

最佳答案

您可以通过根据选中的选项设置元素上的 dir 属性来解决此问题:

$('input[name="radio-1"]').on('change', function() {
    var value = $(this).val();
    $('input[name="direction"]').val(value).attr('dir', value == 'Right' ? 'rtl' : 'ltr');
});

Updated fiddle

关于jquery - 如何更改单选按钮单击时文本框的文本方向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40590076/

相关文章:

c# - 如何在项目中包含本地化的 jquery datepicker

javascript - 单击删除链接后不需要的页面更改

php - 如何将我的一串数字输入数组以获得最频繁出现的数字?

css - 样式化 css 列中的第一项

javascript - jquery 完整日历 : callback 'after' the calendar has loaded completely

javascript - 使用 colorbox 定位 iframe 元素

javascript - 在页面加载时加载时间戳并将其与表单提交时的时间戳进行比较

html - 我怎样才能使这项工作?

javascript - 使用 flexbox 垂直对齐内容

html - CSS 三 Angular 形,Opera 错误显示 :