JavaScript / jQuery - 使用复选框更改单选按钮

Question

我有一个带有单选按钮的基本表单..

 <form action=""> <input type="radio" name="status" value="on"> On<br> <input type="radio" name="status" value="off"> Off<br> </form> <br> <br> <input id="checkBox" type="checkbox">On / Off

我正在寻找一种通过单击复选框来控制单选按钮的方法。 有人有我可以看到的例子吗？

Answer 1

两通！ 从收音机到复选框，反之亦然↔相反

PS：由于默认情况下未选中复选框，因此您还需要将checked属性设置为关闭无线电，以反映这种初始状态！

 var $radios = $('[name="status"]'); var $checkbox = $("#checkBox"); // Handle checkbox click $checkbox.on("change", function() { $radios.filter(":not(:checked)").prop("checked", true); }); // Handle Radios click $radios.on("change", function() { $checkbox.prop("checked", this.value === "on"); });

 <form action=""> <label><input type="radio" name="status" value="on"> On</label> <br> <label><input type="radio" name="status" value="off" checked> Off</label> </form> <br> <br> <label> <input id="checkBox" type="checkbox">On / Off </label> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

这是 ecmascript 6 中的一个片段。

 function getElementWithID(id){return document.getElementById(id);} window.addEventListener('load', ()=> { const checkbox = getElementWithID("checkbox"); const onButton = getElementWithID("on-button"); const offButton = getElementWithID("off-button"); function init() { checkbox.addEventListener('change', ()=> setValues()); setValues(); } function setValues() { onButton.checked = checkbox.checked; offButton.checked = !onButton.checked; } init(); });

 html { background: #222222; color: white; font-family: "helvetica neue", helvetica, sans-serif; } form { margin: 20px 0; }

 <!DOCTYPE html> <html> <head> <title>hokjes</title> <meta charset="utf-8"/> <meta name="author" content="Dani van der Werf" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width" /> </head> <body> <form action=""> <input id="on-button" type="radio" name="status" value="on">On<br> <input id="off-button" type="radio" name="status" value="off">Off<br> </form> <input id="checkbox" type="checkbox">On / Off </body> </html>

请不要使用jquery。

Answer 3

您需要区分单选按钮。 这是一个带有 id 的示例。

$('#checkBox').click(function () {
    if (this.checked == true) {
    $('#on').attr('checked', 'checked');
  } else {
    $("#off").attr('checked', 'checked');
  }
})

Answer 4

通过使用表单控件的#id值设置for属性，可以将<label>与表单控件相关联。 这使得<label>成为链接表单控件的代理或接口。

演示 1 是一个 JavaScript 解决方案。 使用标签链接是为了改善复选框的外观， HTMLFormControlsCollection用于设置/获取表单控件。

演示 2 是一个 CSS 解决方案。 <label>直接链接到单选按钮。 使用通用同级组合器和:checked伪类使得完全没有复选框成为可能。

演示 1 - JavaScript

 // Get all of the form controls in form#main var main = document.forms['main'].elements; /* Register checkbox to the change event... || call onOff function when a change has occured */ main.chx0.onchange = onOff; function onOff(e) { /* if #chx0 is checked... || get the first form control and click it || otherwise click the second form control */ if (this.checked) { main[0].click(); } else { main[1].click(); } }

 #chx0 { display: none } input { font: inherit } label::before { content: '\\2610\\a0OFF'; } #chx0:checked+label::before { content: '\\2611\\a0ON'; }

 <form id='main' action=""> <input type="radio" name="rad" value="on"> On<br> <input type="radio" name="rad" value="off" checked> Off<br> <br> <input id="chx0" type="checkbox"> <label for='chx0'></label> </form>

演示 2 - 仅 CSS（2 路）

 input { font: inherit } #off { display: none } #on::before { content: '\\2611\\a0ON'; } #on { display: inline-block; } #off::before { content: '\\2610\\a0OFF'; } #rad0:checked~#on { display: inline-block; } #ra0:checked~#off { display: none; } #rad1:checked~#off { display: inline-block; } #rad1:checked~#on { display: none; }

 <form id='main' action=""> <input id='rad0' type="radio" name="rad" value="on"> On<br> <input id='rad1' type="radio" name="rad" value="off" checked> Off<br> <br> <label id='off' for='rad0'></label> <label id='on' for='rad1'></label> </form>

JavaScript / jQuery - 使用复选框更改单选按钮

问题描述

4 个解决方案

解决方案1
2 2018-02-05 23:20:43

解决方案2
1 2018-02-08 10:51:46

解决方案3
0 2018-02-05 22:57:17

解决方案4
0 2018-02-06 05:51:45

演示 1 - JavaScript

演示 2 - 仅 CSS（2 路）

JavaScript / jQuery - 使用复选框更改单选按钮

问题描述

4 个解决方案

解决方案1 2 2018-02-05 23:20:43

解决方案2 1 2018-02-08 10:51:46

解决方案3 0 2018-02-05 22:57:17

解决方案4 0 2018-02-06 05:51:45

演示 1 - JavaScript

演示 2 - 仅 CSS（2 路）

解决方案1
2 2018-02-05 23:20:43

解决方案2
1 2018-02-08 10:51:46

解决方案3
0 2018-02-05 22:57:17

解决方案4
0 2018-02-06 05:51:45