Question

我有一个带有单选按钮和复选框的简单表单，用户可以在下载单个或多个语言包之间进行选择。如果选择单个选项，则复选框应该像单选按钮一样，只能勾选一个复选框。如果用户选择多选项，他/她可以勾选任意数量的复选框。如何使用JQuery / JavaScript实现这一目标？任何帮助将不胜感激，因为我对此完全陌生。这是简单的HTML表单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>
    <body>
        <p>Language options:</p>
        <form id="form1" name="form1" method="post" action="">
            <p>
                <label>
                <input type="radio" name="langOptionRadioBtn" value="Single" id="langOptionRadioBtn_0" />
                Single</label>

                <label>
                <input type="radio" name="langOptionRadioBtn" value="Multi" id="langOptionRadioBtn_1" />
                Multi</label>

                <br />
            </p>
        </form>
        <p>Languages: </p>
        <form id="form2" name="form2" method="post" action="">
            <p>
                <label>
                <input type="checkbox" name="langCheckBoxes" value="English" id="langCheckBoxes_0" />
                English</label>

                <br />
                <label>
                <input type="checkbox" name="langCheckBoxes" value="French" id="langCheckBoxes_1" />
                French</label>

                <br />
                <label>
                <input type="checkbox" name="langCheckBoxes" value="Spanish" id="langCheckBoxes_2" />
                Spanish</label>

                <br />
                <label>
                <input type="checkbox" name="langCheckBoxes" value="Russian" id="langCheckBoxes_3" />
                Russian</label>

                <br />
                <label>
                <input type="checkbox" name="langCheckBoxes" value="Arabic" id="langCheckBoxes_4" />
                Arabic</label>

                <br />
                <label>
                <input type="checkbox" name="langCheckBoxes" value="Chinese" id="langCheckBoxes_5" />
                Chinese</label>

                <br />
            </p>
        </form>
    </body>
</html>

Answer 1

您只需在点击时切换输入类型：

$("#langOptionRadioBtn_0").click(function(){
    $('#form2 input[type="checkbox"]').each(function(){
        $(this).prop("type", "radio");
    });
});

$("#langOptionRadioBtn_1").click(function(){
    $('#form2 input[type="radio"]').each(function(){
        $(this).prop("type", "checkbox");
    });
});

您可以在http://jsfiddle.net/um1qgexr/

处测试代码

Answer 2

首先，您不需要两个单独的表格。听起来应该将所有数据发送到同一个地方，因此没有理由将单选按钮和复选框包装在单独的<form>标签中。您的标记可能如下所示：

<p>Language options:</p>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="radio" name="langOptionRadioBtn" value="Single" id="langOptionRadioBtn_0" />
      Single</label>
    <label>
      <input type="radio" name="langOptionRadioBtn" value="Multi" id="langOptionRadioBtn_1" />
      Multi</label>
    <br />
  </p>
<p>Languages: </p>
  <p>
    <label>
      <input type="checkbox" name="langCheckBoxes" value="English" id="langCheckBoxes_0" />
      English</label>
    <br />
        <label>
      <input type="checkbox" name="langCheckBoxes" value="French" id="langCheckBoxes_1" />
      French</label>
    <br />
    <label>
      <input type="checkbox" name="langCheckBoxes" value="Spanish" id="langCheckBoxes_2" />
      Spanish</label>
    <br />
    <label>
      <input type="checkbox" name="langCheckBoxes" value="Russian" id="langCheckBoxes_3" />
      Russian</label>
    <br />
    <label>
      <input type="checkbox" name="langCheckBoxes" value="Arabic" id="langCheckBoxes_4" />
  Arabic</label>
    <br />
    <label>
      <input type="checkbox" name="langCheckBoxes" value="Chinese" id="langCheckBoxes_5" />
      Chinese</label>
    <br />
   </p>
</form>

以下是您可以用来执行建议的jQuery代码。我们的想法是，每次用户单击复选框时，我们都会检查是否选中了多个复选框。如果是，那么我们不必更改复选框的行为，但如果不是，则我们清除除用户实际选择的复选框之外的所有复选框。

var $form = $('#form1');
var $checkboxes = $('input[type=checkbox]');
var $selectionType = $('input[type=radio]');
var $output = $('#output');
var isMulti = false;



// Listen to change event on the radio buttons and set isMulti
$selectionType.on('change', function( e ) {
    // Check the value of what radio button was clicked
    isMulti = $( e.target ).val() === 'Multi';

    // Clear all selected checkboxes if user clicked "single"
    if( !isMulti ) {
        $checkboxes.each( function( idx, item ) {
            $( item ).prop( 'checked', false );
        });
    }
});

// Listen to clicks on checkboxes
$checkboxes.on('change', function( e ) {

    // Store what was just clicked
    var $this = $( e.target );

    // If Multi is not selected, then remove the check from all other checkboxes
    if( !isMulti ) {

        $checkboxes.each( function( idx, item ) {

            var $item = $( item );

            // Do not un check if this is the checkbox the user clicked
            if( $item.attr('id') === $this.attr('id') ) {
                return true;
            }

            $item.prop('checked', false );
        });
    }
});

这里有一个JS小提琴工作：http://jsfiddle.net/grammar/pdx8gccu/2/

希望这有帮助！

Answer 3

快速简单的方法是在选择其中一种时更改类型。

<label>
    <input type="radio" name="langOptionRadioBtn" value="Single" id="langOptionRadioBtn_0" onclick="updateBoxes('radio');" />
    Single
</label>
<label>
      <input type="radio" name="langOptionRadioBtn" value="Multi" id="langOptionRadioBtn_1" onclick="updateBoxes('checkbox');" />
Multi

然后更新框的功能

function updateBoxes(type) {
    var boxes = document.getElementById( 'form2' ).getElementsByTagName( 'input' );
    for( var i=0; i<boxes.length; i++ ) {
        boxes[i].type=type;
        boxes[i].checked = false;
    }
}

Answer 4

在这里： DEMO

$('input[type=checkbox]').change(function(e){
    if($('input[type=radio]:checked').length==0){ 
        $(this).prop('checked',!$(this).prop('checked'));
        return false;
    }
    else if($('input[type=radio]:checked').val()=='Single'){
        $('input[type=checkbox]').not(this).prop('checked',false);
    }
});
$('input[type=radio]').click(function(){
    $('input[type=checkbox]').prop('checked',false);
});

此处如果单击任何单选按钮，则取消选中所有复选框，如果未选择任何单选按钮，则用户无法选中复选框，其余按照问题中的要求进行。

Answer 5

我在这里看到答案，说改变收音机，但也可以使用复选框：

var allowMultiLang = false;

$('#form1 input[type=radio]').on('change', function() {
  // get the selected radio
  var selectedRadio = $('input[type=radio]:checked');
  // if the selected is 'Single'
  if(selectedRadio.val() == 'Single') {
    allowMultiLang = false;
    // uncheck all
    $('#form2 input[type=checkbox]:checked').prop('checked', false);
  // if the selected is 'Multi'
  } else if(selectedRadio.val() == 'Multi') {
    allowMultiLang = true;
  }

});

$('#form2 input[type=checkbox]').on('change', function() {
  if(allowMultiLang === false) {
    if($(this).is(':checked')) {
      // uncheck all BUT this
      $('#form2 input[type=checkbox]').not(this).prop('checked', false);
    }
  }
});

演示：http://jsfiddle.net/b5Le3uLb/

Answer 6

我写的方式如下：
1）找到选中的单选按钮。
2）如果先前选中了复选框，则所选复选框的计数更大超过1，然后清除所有复选框。
3）当选择Single选项时，调用一个取消选中其余复选框的方法。
4）当选择多选项时，取消绑定导致取消选中其他复选框的方法，以便检查多个复选框。

我知道我的代码很长，但是我觉得它会让你开始并且它也是可读的。

来自小提琴的示例示例

$('.language_options').on('click', function() {


ClearCheckBoxes();

if(this.id=='langOptionRadioBtn_0')
{
    $('input[name="langCheckBoxes"]').on('change', function() {
        ClearOtherCheckBoxes(this,'single');

    });

}
else
{
     $('input[name="langCheckBoxes"]').unbind();
}

}）;

这是小提琴链接。

http://jsfiddle.net/5wadfh3o/16/

这已在FireFox 31.0上测试

谢谢。

启用基于单选按钮检查的单个或多个复选框

6 个答案: