Question

这是我的代码：

<div id="title">
    <label class="" id="title-text" for="title">Hello World</label>
    <input type="text" name="doc-title" value="" id="title" autocomplete="off">
</div>
<div id="title-select">
    <input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked"><label for="title-format-0">Title 1</label><br>
    <input type="radio" name="title_format" class="title-format" id="title-format-1" value="1"> <label for="title-format-1">Title 2</label><br>
    <input type="radio" name="title_format" class="title-format" id="title-format-2" value="2"> <label for="title-format-2">Title 3</label>
</div>

我需要的是，

单击广播项目时，应显示相应的标题。假设单击单选按钮2时，“标题2”应更新上面的标签和输入元素。
这需要在EXTERNAL JS FILE中完成！
上面提到的2个DIV块实际上放在单独的PHP文件中并且是高度级联的。所以需要一个纯粹的JS修复。

目前我在外部文件中的内容是这个（ext文件被正确调用）：

$('input[name=title_format]').click(function()  {
    $('input[name=doc-title]').value('Title changed to 2');
};

当然这段代码似乎完全没用。希望有人在这里帮助我。

PS：我是js / jquery中的绝对菜鸟，所以请原谅这是一个简单的修复。如果可能的话，我更喜欢简单的javascript修复。其他JQuery，我理解是通过在我的js文件之前包含jquery-2.1.1.min.js文件。

Answer 1

试试这个： html：

<div id="title">
        <label class="" id="title-text" for="title">Hello World</label>
        <input type="text" name="doc-title" value="" id="title" autocomplete="off">
    </div>
    <div id="title-select">
        <input type="radio" name="title_format" value="title3" onclick="changeTheText(this.value);" class="title-format" id="title-format-0" value="0" checked="checked"><label for="title-format-0">Title 1</label><br>
        <input type="radio" name="title_format" value="title3" onclick="changeTheText(this.value);" class="title-format" id="title-format-1" value="1"> <label for="title-format-1">Title 2</label><br>
        <input type="radio" name="title_format" value="title3" onclick="changeTheText(this.value);" class="title-format" id="title-format-2" value="2"> <label for="title-format-2">Title 3</label>
    </div>

的javascript：

function changeTheText(theValue)
{
  document.getElementById('title').value = theValue;
}

Answer 2

<强> WORKING FIDDLE

您忘记关闭点击功能。还可以制作文档就绪功能。否则它不知道它的哪个元素。

$(document).ready(function(){
    $('[name=title_format]').click(function()  {
        $('[name=doc-title]').val('Title changed to '+$(this).val());
    });
});

编辑：现在将输入文本更改为单选按钮的值。

Answer 3

假设文件正确加载，请尝试...

将.value更改为.val

Answer 4

这是你的html代码（只是添加了jquery cdn和外部JS文件）

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jack.js"></script>

<div id="title">
    <label class="" id="title-text" for="title">Hello World</label>
    <input type="text" name="doc-title" value="" id="title" autocomplete="off">
</div>
<div id="title-select">
    <input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked"><label for="title-format-0">Title 1</label><br>
    <input type="radio" name="title_format" class="title-format" id="title-format-1" value="1"> <label for="title-format-1">Title 2</label><br>
    <input type="radio" name="title_format" class="title-format" id="title-format-2" value="2"> <label for="title-format-2">Title 3</label>
</div>

和您的外部JavaScript代码jack.js

$(document).ready(function(){
    $("input:radio[name=title_format]").click(function() {

        var idVal = $(this).attr("id");
        var value = $("label[for='"+idVal+"']").text();

        $('input[name=doc-title]').val(value);
    });
});

Answer 5

使用.val是否正确。

在你的例子中，JS末尾有一个错误，你错过了)。

http://jsfiddle.net/m05rkdsa/

Answer 6

试试这个

js file

$(document).ready(function(){
  $('#title-select .title-format').click(function()  {
   var title=$(this).next().text();
   $('#title :input').val(title);
});
})

html脚本注册

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js-file.js"></script>

根据外部javascript文件中的单选按钮更改输入文本

6 个答案: