Question

当用户一次选择一个复选框时，我想用超链接替换文本标签。现在，检查一个，其余的也改变。如果所有输入的名称保持不变，它是否可行？

非常感谢任何帮助。

这不能正常工作。

CSS：

.link { display: none }

的Javascript ：

$('input#chkbox').change(function(){
    if($(this).is(':checked')) {
        $('#clink').show();
        $('#label').hide();
    } else {
        $('#label').show();
        $('#clink').hide();
    }
});

HTML：

<label>
    <input type="chkbox" name="item" value="1"/>
    <span id="label">SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>
<label>
    <input type="chkbox" name="item" value="2"/>
    <span id="label">SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>
<label>
    <input type="chkbox" name="item" value="3"/>
    <span id="label">SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>
<label>
    <input type="chkbox" name="item" value="4"/>
    <span id="label">SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>

Answer 1

代码中的#chkbox是一个ID选择器，因此您必须定义一个id属性才能使用＆＃39;＃＆＃39;符号

此外，请注意每个页面的ID必须是唯一的 https://api.jquery.com/id-selector/

Answer 2

这可以用CSS完成，不需要javascript。

现在指出你的错误：

type="chkbox"应为type="checkbox"
ID必须在页面上是唯一的，如果您需要倍数，请改用class。

现在代码：

＆＃13;

.link {display:none;}
label input[type="checkbox"]:checked ~ span {display:none;}
label input[type="checkbox"]:checked ~ a {display:inline;}

＆＃13;

<label>
    <input type="checkbox" name="item" value="1"/>
    <span>SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>
<label>
    <input type="checkbox" name="item" value="2"/>
    <span >SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>
<label>
    <input type="checkbox" name="item" value="3"/>
    <span >SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>
<label>
    <input type="checkbox" name="item" value="4"/>
    <span >SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>

＆＃13;

如果您想继续使用jQuery，可以使用与以下

相同的html

$("input[type='checkbox']").click(function(){
 //Get Siblings and toggle their visibility;
  $(this).siblings().toggle();
});

＆＃13;

$("input[type='checkbox']").click(function(){
 //Get Siblings and toggle their visibility;
  $(this).siblings().toggle();
});

＆＃13;

.link {display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>
    <input type="checkbox" name="item" value="1"/>
    <span>SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>
<label>
    <input type="checkbox" name="item" value="2"/>
    <span >SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>
<label>
    <input type="checkbox" name="item" value="3"/>
    <span >SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>
<label>
    <input type="checkbox" name="item" value="4"/>
    <span >SELECT TO COMPARE</span>
    <a class="link" href="#">COMPARE</a>
</label>

＆＃13;

将文本标签更改为链接

2 个答案: