如何更改输入标签之间的文本，并将标签复选框和图标对齐在一行上

how to change text between input tags and align label checbox and icon on one line

本文关键字：标签 对齐 图标 一行 复选框 之间 输入 何更改 文本      更新时间：2023-09-26

我现在有这个:

<script type="text/javascript">
                    $(document).ready(function(){
                     /* als je selectbox gebruikt doe dan deze:
                     $("#deliveryType").change(function(){
                         $("img[name=deliveryIcon]").attr("src","images/rushdeliveryicon.png");
                       });
*/
                       $('#deliveryType').click(function() {
                           $deliveryType = document.getElementById("deliveryType");
                            if ($(this).is(':checked') == true) {
                                $deliveryType.value="spoed";
                                $('#deliveryType').text("Spoedlevering");
                                $("img[name=deliveryIcon]").attr("src","images/rushdeliveryicon.png");
                            }else{
                                $deliveryType.value="week";
                                $('#deliveryType').text("Weeklevering");
                                $("img[name=deliveryIcon]").attr("src","images/weekdeliveryicon.png");
                            }
                        });
                    });

                </script>

            <label id="deliverylabel" for="delivery">Leveringsoort
                <!--    <select name="deliveryType" id="deliveryType" >
                        <option value="week">Weeklevering</option>
                        <option value="rush">Spoedlevering</option>
                    </select>
                -->
                <input name="deliveryType" id="deliveryType" type="checkbox" value="week" >Weeklevering</input>
            <img name="deliveryIcon" src="images/weekdeliveryicon.png" style="width:64px;height:64px;" /></label>

如果我点击复选框，那么输入标签之间的文本需要更改:

 <input name="deliveryType" id="deliveryType" type="checkbox" value="week">Weeklevering</input>

接下来，我也试着让标签的文本和复选框+文本+图标对齐在一行，这样它就像表单上的其他输入字段一样适合。请看:http://jsfiddle.net/nqm4bpnu/

CSS的问题是复选框输入也采用这种样式:

div.wrapperDiv
{
    width:100%;
    float:left;
    margin-bottom:20px;
}

但是因为它是一个复选框所以它不需要有这么大的宽度

有什么想法

谢谢

首先是<input>没有关闭标签(</input>)，所以我将其更改为</input>，添加了具有不同id的<span>来显示文本，并将click更改为change(这无关紧要，但我更喜欢更改复选框事件)

 <label id="deliverylabel" for="delivery">Leveringsoort</label>
 <input name="deliveryType" id="deliveryType" type="checkbox" value="week" /> 
 <span id="displayTypeText">Weeklevering</span>  <!-- <-----here -->
 <img name="deliveryIcon" src="images/weekdeliveryicon.png" style="width:64px;height:64px;" />

JS 

$('#deliveryType').change(function () {
    if (this.checked) {
        this.value = "spoed";
        $('#displayTypeText').text("Spoedlevering");
        $("img[name=deliveryIcon]").attr("src", "images/rushdeliveryicon.png");
    } else {
        this.value = "week";
        $('#displayTypeText').text("Weeklevering");
        $("img[name=deliveryIcon]").attr("src", "images/weekdeliveryicon.png");
    }
});

我不是一个设计师，但我认为你应该添加一个div与float:left围绕这个。无论如何，这是一个工作小提琴，

小提琴

正如我已经提到的，我不是一个设计师，但这应该让你去(添加它在CSS脚本的末尾，

 #deliveryType{
    width:30%!important;
 }

更新小提琴

试着用这个——

  1. 从输入标签中删除'Weeklevering'

    <input name="deliveryType" id="deliveryType" type="checkbox" value="week" >Weeklevering</input>

并使HTML像这样，

<input name="deliveryType" id="deliveryType" type="checkbox" value="week" >
<span id="label">Weeklevering</span>

  • 在jquery代码中更改blow line -

    $('#deliveryType').text("Spoedlevering");

    • , 

    $('#label').html("Spoedlevering");

    注意:对jQuery代码中的两个实例都执行此操作。

  • 要使这三个项目在一行中，添加以下css -

    #deliverylabel { display: block; text-align: left; width: 100% !important; }#deliverylabel > input { display: inline-block; margin-left: 15px; vertical-align: middle; width: auto; }

    • 相关文章：