Question

我有一个单选按钮输入，提示“否”和“是”。选择否时如何加载“ Hello World”，选择是时如何加载“ Hello World 1”。

默认情况下，应禁用hello world和hello world 1。有帮助吗？

关于，比尔

<span>No</span>
<span class="float-right mr-3">
<input type="radio" name="damage">
</span>

<span class="">Yes</span>
<span class="float-right mr-3">
<input type="radio" name="damage">
</span>

<p>Hello World</p>
<p>Hello World 1</p>

Answer 1

您可以修改代码，为每个无线电提供数据属性和类。这样，您可以简化代码，甚至提前计划

$(document).ready(function(){
   
    $(document).on("change",".data-radio",function(){
        $(".data-content").hide();
        $($(this).data("content")).show();
    });
});

.data-content{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>No</span>
<span class="float-right mr-3">
<input type="radio" class="data-radio" data-content=".no-damage" name="damage">
</span>

<span class="">Yes</span>
<span class="float-right mr-3">
<input type="radio" class="data-radio" data-content=".damaged" name="damage">
</span>

<p class="data-content no-damage">No Damage!</p>
<p class="data-content damaged">Damaged!</p>

Answer 2

此答案可能更容易理解。

这里创建了一个<p></p>元素，并为其指定了特定的id="output-text"。

向每个单选按钮添加onclick属性，并在侦听器功能（在此代码clicked()功能中）中传递您想要的数据。其余工作由javascript完成。

请参见以下代码：

function clicked(val) {
  document.getElementById("output-text").textContent = val;
}

<span>No</span>
<span class="float-right mr-3">
<input onclick="clicked('Hello World')" type="radio" name="damage">
</span>

<span class="">Yes</span>
<span class="float-right mr-3">
<input onclick="clicked('Hello World 1')" type="radio" name="damage">
</span>

<p id="output-text"></p>

希望，这会有所帮助。谢谢。

如何在选择单选按钮时加载文本？

2 个答案: