Question

我的代码如下

<script>
function search()
{
 var bed = document.getElmentById("bed").value;
alert(bed);
}
</script>

    <input type="checkbox" id="bed" name="bed" value="1" onClick="search()"/>1 BHK <br/>
                                <input type="checkbox" id="bed" name="bed" value="2" onClick="search()"/>2 BHK  <br/>
                                <input type="checkbox" id="bed" name="bed" value="3" onClick="search()"/>3 BHK  <br/>
                                <input type="checkbox" id="bed" name="bed" value="4" onClick="search()"/>4 BHK  <br/>
                                <input type="checkbox" id="bed" name="bed" value="5" onClick="search()"/>5 BHK  <br/>

当我点击任何一个复选框时，我只得到第一个值。

Answer 1

所有复选框都具有相同的ID。这意味着document.getElementById("bed")将始终返回带有id＆＃34; bed＆＃34;的第一个元素。在您的情况下，这是<input type="checkbox" id="bed" name="bed" value="1" onClick="search()"/>。尝试在评论中给出其他不同的id或类似内容，将其放入数组中。

Answer 2

首先，如果你想要一个来自输入组的值，你应该使用输入类型radio（单选按钮），并且永远不要为不同的DOM元素编写相同的id。

以下代码是jquery的解决方案：

＆＃13;

function search()
{
  var bed = $( "input[name=bed]:checked" ).val();
  alert(bed);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="bed" value="1" onClick="search()"/>1 BHK <br/>
<input type="radio" name="bed" value="2" onClick="search()"/>2 BHK <br/>
<input type="radio" name="bed" value="3" onClick="search()"/>3 BHK <br/>
<input type="radio" name="bed" value="4" onClick="search()"/>4 BHK <br/>
<input type="radio" name="bed" value="5" onClick="search()"/>5 BHK <br/>

＆＃13;

点击javascript中的多个复选框

2 个答案: