Question

单击一个单独的按钮检查复选框时出现问题。例如，我想通过单击下面的按钮来检查梅赛德斯SLK复选框。我该如何实现呢？

提前感谢您的反馈。

示例代码：

<form action="">
<input type="checkbox" name="vehicle" value="volvo">Volvo XC90<br>
<input type="checkbox" name="vehicle" value="bmw">BMW 325i<br> 
<input type="checkbox" name="vehicle" value="mercedes">Mercedes SLK
</form>
<button type="button">Check Mercedes SLK</button>

Answer 1

试试这个：

$("select[name='cars'] option[value='mercedes']").prop('checked', true)

demo

只需点击内部按钮即可。

Answer 2

将此添加到您的按钮元素：

onclick="document.getElementById('mercedes').checked = true"

Answer 3

不改变html并给出ID本身就是个好主意。

普通JS：

window.onload=function() {
  document.querySelector("button").onclick=function() {
    document.getElementsByName("vehicle")[2].checked=true;
  }
}

jQuery的：

DEMO

$(function() {
  $("button").on("click",function() {
    $("input[value='mercedes']").prop("checked",true);
  });
});

Answer 4

你可以使用jquery这样做：

<form>
<input type="checkbox" name="vehicle" value="volvo">Volvo XC90<br>
<input type="checkbox" name="vehicle" value="bmw">BMW 325i<br> 
<input type="checkbox" id="slk" name="vehicle" value="mercedes">Mercedes SLK
</form>
<button id="checkSlk" type="button">Check Mercedes SLK</button> 

<script type="text/javascript">
    $(function () {
        $("#checkSlk").on("click", function () {
            if ($("#slk").is(':checked')) {
                $("#slk").attr("checked", false);
            } else {
                $("#slk").attr("checked", true);
            }
        });
    });
</script>

单击按钮选中复选框

4 个答案: