如何在输入标签之间更改文本以及如何在一行上对齐标签复选框和图标

Question

我目前有这个：

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

在此旁边，我还尝试将标签的文本和复选框+文本+图标对齐在1行上，以使其适合表单上其余的输入字段。 请看一下： http : //jsfiddle.net/nqm4bpnu/

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

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

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

有任何想法吗

谢谢

Answer 1

首先是<input>没有结束标记(</input>)所以我将其更改为</input> ，并添加了一个具有不同ID的<span>以显示文本并更改了click以进行change （这不会没关系，但我希望更改事件为复选框）

的HTML

 <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");
    }
});

我不是设计师，但我认为您应该在此周围添加一个带有float:left的div。 无论如何，这里是一个工作的小提琴，

小提琴

更新

正如我已经提到的，我不是设计师，但这应该可以帮助您（将其添加到CSS脚本的末尾，

 #deliveryType{
    width:30%!important;
 }

更新的小提琴

Answer 2

尝试使用-

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>

2. 更改您的jquery代码中的打击线-

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

为此，

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

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

3. 要使所有三个项目都显示在一行中，请添加以下CSS-

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

希望这可以帮助。