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

你只需要切换输入类型点击:

$("#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/测试代码。

首先，您不需要两个单独的表单。听起来好像所有的数据都应该发送到同一个地方，因此没有理由将单选按钮和复选框包装在单独的<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代码，你可以用它来做你所建议的。其思想是，每次用户单击复选框时，我们都会检查是否选中了multi。如果是，那么我们不需要改变复选框的行为，但如果不是，那么我们清除所有的复选框，除了用户实际选择的那个。

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/

希望这对你有帮助!

一种快速而简单的方法是在选择一个或另一个时更改类型。

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

给你:演示

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

如果您单击任何单选按钮，则所有复选框都被取消选中，如果没有选中单选按钮，则用户不能选择复选框，其余部分按照问题的要求

我看到这里的答案，说改变为单选，但也可以使用复选框:

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/

我写的方法如下:
1)找到被选中的单选按钮。
2)如果之前选中了复选框，并且选中的复选框的数量较大选择1，然后清除所有的复选框。
3)当单个选项被选中时，调用一个方法取消选中其余的复选框。
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();
}

});

这是小提琴的链接。

这是在FireFox 31.0上测试的

谢谢。