更改输入文本的JavaScript文件

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> 

我需要的是，

1. 点击一个无线电项目时，应显示相应的标题。说单击单选按钮2时，“标题2”应该更新上面的标签和输入元素。

2. 这需要在EXTERNAL JS FILE中完成！

3. 上面提到的2个DIV块实际上放置在单独的PHP文件中，并且严重级联。所以需要一个纯粹的JS修复。

目前我在我的外部文件是这样的（EXT文件得到正确的称呼）：

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

Ofcourse该代码似乎完全无用。 希望有人能帮助我。

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

Answer 1

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

变化.value到.val

Answer 2

WORKING FIDDLE

你忘了关点击功能。 也做一个文件就绪功能。否则它不知道它是哪个元素。

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

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

Answer 3

试试这个： 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 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文件

$(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>