Question

我想在选中复选框时显示或隐藏输入文本元素。

我有一个<ul>列表和4个<li>。第1和第3个li是复选框，第2个和第4个li是文本输入。选中复选框后，jquery将显示输入文本，如果未选中则显示为隐藏。但这打破了风格。

<ul>
    <li>
        <input type="checkbox" id="price1" value="">
        <label for="price1"><span></span>Se Vende</label>
    </li>
    <li class="price-1" style="display: none;">
        <input type="text" placeholder="Precio de Venta"name="price[sale]" />
        <span class="unit unit-2">&euro;</span>
    </li>
    <li class="test">
        <input type="checkbox" id="price2" value="">
        <label for="price2"><span></span>Se Alquila</label>
    </li>
    <li class="price-2" style="display: none;">
        <input type="text" placeholder="Precio de Alquiler" name="price[rent]" />
        <span class="unit unit-2">&euro;</span>
    </li>
</ul>

我正试图让它在这里工作：http://jsfiddle.net/nazu61p7/

Answer 1

尝试以下代码段。

$(':checkbox').change(function () {
    if ($(this).is('#price1') && $(this).is(':checked')) {
        $('.price-1').toggle();
        $('ul li:last-child').addClass('test');
    } else if ($(this).is('#price1')) {
        $('.test').removeClass('test');
        $('.price-1').toggle();
    }
    if ($(this).is('#price2')) {
        $('.price-2').toggle();
    }
});

ul {
    padding:1em 0 0;
    max-width: 50%;
    margin: 0;
    border: 1px solid #eee;
}
ul li {
    list-style:none;
    padding: 9px 0px;
    display: inline-block;
    width: 40%;
}
.test {
    margin-top:8px;
}
input[type="text"], textarea {
    padding: 0.8em 1em;
    font-size: 0.85em;
    border: 1px solid #eee;
    color: #a3a3a3;
    background: white;
    outline: none;
    width: 50%;
    -webkit-appearance: none;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li style="margin-top: 9px;">
        <input type="checkbox" id="price1" value="">
        <label for="price1"><span></span>Se Vende</label>
    </li>
        
    <li class="price-1" style="display: none;">
        <input type="text" placeholder="Precio de Venta" name="price[sale]" /> <span class="unit unit-2">&euro;</span>
    </li>
        <br/>
    <li class="test">
        <input type="checkbox" id="price2" value="">
        <label for="price2"><span></span>Se Alquila</label>
    </li>
        
    <li class="price-2" style="display: none;">
        <input type="text" placeholder="Precio de Alquiler" name="price[rent]" /> <span class="unit unit-2">&euro;</span>

    </li>
</ul>

演示：http://jsfiddle.net/kishoresahas/nazu61p7/1/

Answer 2

我该怎么做：

<lu>
    <li>
        <input type="checkbox" />Se Vende
        <div>
            <span>&euro;</span>
            <input type="text" placeholder="Precio de Venta" name="price[sale]" />
        </div>
    </li>
</ul>

用这个css：

ul li {width: 100%;}
ul li div {width:100%;}

当然你需要调整你的js。

显示/隐藏元素破坏风格

2 个答案: