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>，添加了一个<span>，其中包含不同的ID以显示文字并将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。无论如何这里是一个工作小提琴，

fiddle

<强>已更新

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

 #deliveryType{
    width:30%!important;
 }

updated fiddle

Answer 2

尝试使用此 -

删除＆＃39; Weeklevering＆＃39;来自您的输入标签

<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代码中的打击行 -

$('#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; }

希望这会有所帮助。

如何在输入标签之间更改文本并在一行上对齐标签checbox和图标

2 个答案: