JQueryでテキスト、セレクトボックス、チェックボックス、ラジオボタンを動的に生成して値を取得する方法

PPS tewonameruneko 1024x682 JQueryでテキスト、セレクトボックス、チェックボックス、ラジオボタンを動的に生成して値を取得する方法

テキストボックスやセレクトボックス、チェックボックス、ラジオボタンを動的に生成して追加しようとして調べたのでまとめておきます。

テキストボックスの表示を試してみたらFirefoxで動かなかったコードです。

<html>
<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript">

function func1(){
alert("start");
var $input = $("<input>").attr("type","text").val("testooo");
alert("start2");
$("#inputtest").html($input);
alert("end");
}
</script>

</head>
<body>

<input type="button" name="test" value="test" onclick="func1()"/>
<div id="inputtest"></div>

</body>
</html>

以下に修正したら動きました。

<html>
<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript">

function func1(){
alert("start");
var $input = $('<input type="text" />').attr({name: 'test'}).val("testooo");
alert("start2");
$("#inputtest").html($input);
alert("end");
}
</script>

</head>
<body>

<input type="button" name="test" value="test" onclick="func1()"/>
<div id="inputtest"></div>

</body>
</html>

どうやらちゃんと$(‘<input type=”text” />’)と指定しないとだめなようです。

さて、ではあわせて他も調査してみます。
値の取得もしてみました。

チェックボックス

<html>
<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript">

function func1(){
var $input = $('<input type="checkbox" />').attr({name: 'test1'}).attr("checked", true );
var $label = $('<label>labeltest1</label>')
$("#inputtest").html($input).append($label);
var $input = $('<input type="checkbox" />').attr({name: 'test2'});
var $label = $('<label>labeltest2</label>')
$("#inputtest").append($input).append($label);
}

function func2(){
    alert("labeltest1:" + $('input[name="test1"]:checked').val());
    alert("labeltest2:" + $('input[name="test2"]:checked').val());
}

</script>

</head>
<body>

<input type="button" name="test" value="test" onclick="func1()"/>
<div id="inputtest"></div>

<input type="button" name="test" value="チェックボックス確認" onclick="func2()"/>

</body>
</html>

セレクトボックス

<html>
<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript">

function func1(){
var $input = $('<select/>').attr('id','select1');
$input.append($('<option>').html("追加される項目名1").val("追加される値3"));
$input.append($('<option>').html("追加される項目名2").val("追加される値4"));

$("#inputtest").html($input);
}

function func2(){
    alert($('#select1').val());
}
</script>

</head>
<body>

<input type="button" name="test" value="test" onclick="func1()"/>
<div id="inputtest"></div>

<input type="button" name="test" value="select確認" onclick="func2()"/>
</body>
</html>

ラジオボタン

<html>
<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript">

function func1(){

var $input = $('<input type="radio" name="test" value="0" />').attr("checked", true );
var $label = $('<label>labeltest1</label>')
$("#inputtest").html($input).append($label);
var $input = $('<input type="radio" name="test" value="1" />').attr("checked", false );
var $label = $('<label>labeltest2</label>')
$("#inputtest").append($input).append($label);

}

function func2(){
    alert($('input[name="test"]:checked').val());
}
</script>

</head>
<body>

<input type="button" name="test" value="test" onclick="func1()"/>
<div id="inputtest"></div>

<input type="button" name="test" value="radio確認" onclick="func2()"/>
</body>
</html>

こんな感じです。

htmlをダウンロードできるようにしておきますので試してみてください。
20130424_1


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">