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

根据外部javascript文件中的单选按钮单击更改输入文本,javascript,jquery,input,label,external,Javascript,Jquery,Input,Label,External,这是我的代码: <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"> <in

这是我的代码:

<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>
当然,这段代码看起来毫无用处。 希望有人能帮我

PS:我在js/jquery中是一个绝对的noob,所以如果这是一个简单的修复,请原谅。 如果可能的话,我更喜欢简单的javascript修复。
否则JQuery,我的理解是在我的js文件之前包含JQuery-2.1.1.min.js文件。

假设文件加载正确,请尝试


.value
更改为
.val

假设文件加载正确,请尝试

.value
更改为
.val

您忘记关闭单击功能。 还可以创建一个文档就绪功能。或者它不知道它的元素是关于哪个的

$(document).ready(function(){
    $('[name=title_format]').click(function()  {
        $('[name=doc-title]').val('Title changed to '+$(this).val());
    });
});
编辑:现在将输入文本更改为单选按钮的值。

您忘记关闭单击功能。 还可以创建一个文档就绪功能。或者它不知道它的元素是关于哪个的

$(document).ready(function(){
    $('[name=title_format]').click(function()  {
        $('[name=doc-title]').val('Title changed to '+$(this).val());
    });
});
编辑:现在将输入文本更改为单选按钮的值。

尝试以下操作: html:

试试这个: html:

这是您的html代码(刚刚添加了jquery cdn和外部JS文件)

这是您的html代码(刚刚添加了jquery cdn和外部JS文件)


正确使用
.val

在您的示例中,JS末尾有一个错误,您错过了一个


使用
.val是正确的

在您的示例中,JS末尾有一个错误,您错过了一个

试试这个

js文件

html脚本注册


试试这个

js文件

html脚本注册



好发现。。。错过了那部分,但代码不起作用。。。因为我的代码分布在多个php文件中,并且上面提到的代码被大量级联并放置在多个文件中,但是2个DIV代码块保持不变。那么这是否意味着我需要一个完整的页面负载或什么来检查?对不起打扰了。再次感谢您的修复。为什么所有代码都在不同的页面中?为什么不做一页呢?输入和单选按钮是否在iframe中?同时尝试在页面底部插入外部JS脚本。很好的发现。。。错过了那部分,但代码不起作用。。。因为我的代码分布在多个php文件中,并且上面提到的代码被大量级联并放置在多个文件中,但是2个DIV代码块保持不变。那么这是否意味着我需要一个完整的页面负载或什么来检查?对不起打扰了。再次感谢您的修复。为什么所有代码都在不同的页面中?为什么不做一页呢?输入和单选按钮是否在iframe中?同时尝试在页面底部插入外部JS脚本。谢谢回复。2个DIV块被放置在多个文件中,并且高度级联。这会成为此代码修复的问题吗?因为它不适合我,所以我想知道。再次感谢..嗯,那么你需要使用ID和类,如果我看一下你的全部代码,然后对它有一些了解,所以对于ID,它是“input:radio[ID=title-format-1]”和类似的?谢谢你的回复。。我会试试的。谢谢你的回复。2个DIV块被放置在多个文件中,并且高度级联。这会成为此代码修复的问题吗?因为它不适合我,所以我想知道。再次感谢..嗯,那么你需要使用ID和类,如果我看一下你的全部代码,然后对它有一些了解,所以对于ID,它是“input:radio[ID=title-format-1]”和类似的?谢谢你的回复。。我会努力的。
<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>
function changeTheText(theValue)
{
  document.getElementById('title').value = theValue;
}
<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>
$(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);
    });
});
$(document).ready(function(){
  $('#title-select .title-format').click(function()  {
   var title=$(this).next().text();
   $('#title :input').val(title);
});
})
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js-file.js"></script>