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

双向的！从无线电到复选框和vice↔versa

PS：默认情况下，由于复选框未选中，您需要将bc属性设置为 off 电台，以反映此类初始值状态！

＆＃13;

wget http://phodd.net/gnu-bc/code/logic.bc

＆＃13;

checked

＆＃13;

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

您需要区分单选按钮。这是ids的一个例子。

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

Answer 4

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

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

演示2是一个CSS解决方案。 <label>直接链接到单选按钮。使用general sibling combinator和:checked pseudo-class可以完全没有复选框。

演示1 - JavaScript

＆＃13;

// 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();
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

演示2 - 仅限CSS（双向）

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

4 个答案:

演示1 - JavaScript

演示2 - 仅限CSS（双向）