Jquery 如何显示带有选定值和说明的复选框_Jquery

Jquery 如何显示带有选定值和说明的复选框

jquery

Jquery 如何显示带有选定值和说明的复选框,jquery,Jquery,选中复选框后，其选定值将显示为文本如何使其显示一个复选框，旁边显示文本和说明 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <scrip

选中复选框后，其选定值将显示为文本如何使其显示一个复选框，旁边显示文本和说明

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", ":checkbox", function (e) {
                if ($(this).is(':checked')) {
                    var checkbox =  $("#sample").prepend('<div id="anotherdiv">' + $(this).attr('value') + '</div>');
                    $("#sample").prepend(checkbox); 
                }
                else {
                    $('#anotherdiv').remove();
                }
            });
        });
    </script>
</head>
<body class="center" style= "margin-top: 150px;">
    <div id="sample"></div>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
</body>
</html>


$（文档）.ready（函数（）{
$（文档）。在“单击”、“复选框”上，函数（e）{
如果（$（this）.is（':checked'））{
var checkbox=$（“#sample”）.prepend（“”+$（this.attr（'value'）+“”）；
$（“#样本”）。前置（复选框）；
}
否则{
$（'#另一个div'）。删除（）；
}
});
});
我有一辆自行车

我不知道我是否正确理解了您的问题，但如果您希望value属性的值出现在复选框的前面或后面，代码将是：
html:

以前

<script type="text/javascript">
$(document).ready(function(){
     $(document).on("click", "input[type='checkbox']", function (e) {   
        var id=$(this).attr('id')
        if($('#' + id).is(":checked")){
             $( '<span class="anotherdiv">' + $(this).attr('value') + '</span>').appendTo('body').insertBefore($(this)) 
            }else{
              $(this).prev().remove();  
            }
        })

    })
</script>


$（文档）.ready（函数（）{
$（文档）。在（“单击”、“输入[type='checkbox']”上，函数（e）{
var id=$（this.attr（'id'））
如果（$（'#'+id.）.is（“：checked”））{
$（“”+$（this.attr（'value'）+“”）.appendTo（'body'）.insertBefore（$（this））
}否则{
$（this.prev（）.remove（）；
}
})
})

之后：

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on("click", "input[type='checkbox']", function (e) {
            var id=$(this).attr('id')
            if($('#' + id).is(":checked")){
                 $( '<span class="anotherdiv">' + $(this).attr('value') + '</span>').appendTo('body').insertAfter($(this)) 
                }else{
                  $(this).next().remove();  
                }
            })

        })
    </script>


$（文档）.ready（函数（）{
$（文档）。在（“单击”、“输入[type='checkbox']”上，函数（e）{
var id=$（this.attr（'id'））
如果（$（'#'+id.）.is（“：checked”））{
$（“”+$（this.attr（'value'）+“”）.appendTo（'body'）.insertAfter（$（this））
}否则{
$（this.next（）.remove（）；
}
})
})

html:

如果因为我不懂英语，我没能正确理解你的问题，我很抱歉让你浪费时间。

你想要这个吗？仅使用css完成。选中每个复选框以查看复选框旁边的值。

 <input id="a"type="checkbox" name="vehicle" value="Bike"><br>
 <input id="b"type="checkbox" name="car" value="Car"><br>