Question

我试图确保用户只能选择一个复选框，但看起来没有选中任何内容。我做错了什么？

<div class="formField rsform-block rsform-block-typprofilu">
    <br>
    <input name="form[typprofilu][]" type="checkbox" value="Montreal (Oceľ)" id="typprofilu0" checked="checked">
    <label for="typprofilu0">Montreal (Oceľ)</label>
    <input name="form[typprofilu][]" type="checkbox" value="Halifax (Oceľ)" id="typprofilu1">
    <label for="typprofilu1">Halifax (Oceľ)</label>
    <input name="form[typprofilu][]" type="checkbox" value="Calgary (Hliník)" id="typprofilu2">
    <label for="typprofilu2">Calgary (Hliník)</label>
    <input name="form[typprofilu][]" type="checkbox" value="Niagara (Hliník)" id="typprofilu3">
    <label for="typprofilu3">Niagara (Hliník)</label>
    <input name="form[typprofilu][]" type="checkbox" value="Hudson (Hliník)" id="typprofilu4">
    <label for="typprofilu4">Hudson (Hliník)</label><br>
    <span id="component781" class="formNoError">Invalid Input</span>
    <br>
</div>

jQuery的：

jQuery('.rsform-block-typprofilu input#typprofilu0[type="checkbox"]').attr('checked',true); 

    jQuery('body').on('click','.rsform-block-typprofilu input[name="form[typprofilu][]"]',function(){
                jQuery('.rsform-block-typprofilu input[name="form[typprofilu][]"]').attr('checked', false);
                var whatIsChecked = jQuery(this).attr('id');
                //var isChecked = jQuery(this).is(':checked');   
                jQuery(this).attr('id',whatIsChecked).attr('checked',true);
            });

EDITED：带有单选按钮的解决方案

<div class="formField rsform-block rsform-block-typprofilu">
        <br>
        <input name="form[typprofilu]" type="radio" value="Montreal (Oceľ)" id="typprofilu0" checked="checked"><label for="typprofilu0">Montreal (Oceľ)</label><input name="form[typprofilu]" type="radio" value="Halifax (Oceľ)" id="typprofilu1"><label for="typprofilu1">Halifax (Oceľ)</label><input name="form[typprofilu]" type="radio" value="Calgary (Hliník)" id="typprofilu2"><label for="typprofilu2">Calgary (Hliník)</label><input name="form[typprofilu]" type="radio" value="Niagara (Hliník)" id="typprofilu3"><label for="typprofilu3">Niagara (Hliník)</label><input name="form[typprofilu]" type="radio" value="Hudson (Hliník)" id="typprofilu4"><label for="typprofilu4">Hudson (Hliník)</label><br>
        <span id="component782" class="formNoError">Invalid Input</span>
        <br>
    </div>

 jQuery('.rsform-block-typprofilu input#typprofilu0[type="radio"]').attr('checked',true);

jQuery('body').on('click','.rsform-block-typprofilu input[name="form[typprofilu]"]',function(){ // ez a radiok kozul a valasztasom
    jQuery('.rsform-block-typprofilu input[name="form[typprofilu]"]').attr('checked', false);
var whatIsChecked = jQuery(this).attr('id');
    var isChecked = jQuery(this).is(':checked');

     jQuery(this).attr('id',whatIsChecked).attr('checked',true);
});

它没有改变......所选择的是第一个......但是在HTML中它似乎改变了被检查的attr。

Answer 1

如果您只想在一组复选框中选择一个，那么为什么不使用单选按钮呢？它们原生提供此功能。

<input type="radio" name="">

如果您希望能够取消选择单选按钮（类似于复选框功能），那么您可以使用JavaScript实现它。

var radios = $(':radio');

radios.on('click', function() {
  var radio = $(this);

  // because .is(:checked) is true AS
  // you check, we use our own flag that
  // is only true AFTER you check        
  radio.trigger(radio.data('ischecked') ? 'uncheck' : 'check');
});

// when the radio selection is changed, fire 
// the uncheck event on the selected radio's 
// sibling that was checked
radios.on('change', function() {
  var siblings = $(':radio[name="' + this.name + '"]').not(this);

  siblings.each(function() {
    var sibling = $(this);
    if (sibling.data('ischecked')) {
      sibling.trigger('uncheck');
    }  
  });
});

// custom check / uncheck events
radios.on('check uncheck', function(e) {
  var checked = (e.type === 'check');
  $(this).data('ischecked', checked).attr('checked', checked);
});

// make sure all radios have the necessary 
// ischecked flag on DOM ready
radios.filter(':checked').each(function(i, r) {
  $(this).trigger('check');
});

如果您更喜欢这种样式，您还可以使单选按钮看起来像复选框（在现代浏览器中除IE之外）：

input[type="radio"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  -ms-appearance: checkbox;     /* not currently supported */
  -o-appearance: checkbox;      /* not currently supported */
  appearance: checkbox;      
}

<强> Here's a demo

Answer 2

如果你将html代码包装在一些基本的html标签中，将其保存为.html文件并在浏览器中加载，你可以清楚地看到第一个复选框被选中。

<html>
<body>
<div class="formField rsform-block rsform-block-typprofilu">
<br>
<input name="form[typprofilu][]" type="checkbox" value="Montreal (Oceľ)" id="typprofilu0" checked="checked">
<label for="typprofilu0">Montreal (Oceľ)</label>
<input name="form[typprofilu][]" type="checkbox" value="Halifax (Oceľ)" id="typprofilu1">
<label for="typprofilu1">Halifax (Oceľ)</label>
<input name="form[typprofilu][]" type="checkbox" value="Calgary (Hliník)" id="typprofilu2">
<label for="typprofilu2">Calgary (Hliník)</label>
<input name="form[typprofilu][]" type="checkbox" value="Niagara (Hliník)" id="typprofilu3">
<label for="typprofilu3">Niagara (Hliník)</label>
<input name="form[typprofilu][]" type="checkbox" value="Hudson (Hliník)" id="typprofilu4">
<label for="typprofilu4">Hudson (Hliník)</label><br>
<span id="component781" class="formNoError">Invalid Input</span>
<br>
</div>
</body>
</html>

我怀疑你的样式表有问题吗？

Answer 3

您使用的是什么jQuery库？在jQuery 1.9.1中使用prop而不是attr，工作示例：jsFiddle example

我在prop和attr方法以及复选框的checked属性方面遇到了一些问题，如果我记得正确则取决于jQuery版本。

Answer 4

试试这个

示例：

   <div class="formField rsform-block rsform-block-typprofilu">
     <input type="radio" value="first" id="1" checked="checked"/>
     <input type="radio" value="second" id="2"/>
     <input type="radio" value="third" id="3"/>
   </div>


   $(document).ready(function(){

     var previousCheckedElem = $("#1")

     $("input[type='radio']").click(function(e){
         previousCheckedElem.attr("checked",false);
         previousCheckedElem = $(this);
     });
   });

根据您的要求进行更改（例如：id，元素）。

Fiddle Demo

Answer 5

很少有观察，

设置默认选中元素时，您正在使用复杂选择器，而可以使用简单的id选择器jQuery('#typprofilu0')完成。
要取消选中其他复选框时要忽略当前项目，您可以使用.not()
然后，每个人都建议使用.prop()更改运行时dom属性，例如checked和selected，而不是.attr()

应该像

jQuery('#typprofilu0').prop('checked',true); 

jQuery('body').on('click','.rsform-block-typprofilu input[name="form[typprofilu][]"]',function(){
    jQuery('.rsform-block-typprofilu input[name="form[typprofilu][]"]').not(this).prop('checked', false);
});

演示：Fiddle

Answer 6

我刚刚意识到，从JS角度来看，使用复选框模仿单选按钮功能实际上比使用无线电模仿复选框功能更简单/更轻：/

试试这个：

var checkboxes = $(':checkbox');

checkboxes.on('click', function() {
  var group = '[name="' + this.name + '"]',
      siblings = checkboxes.filter(group).not(this);
  siblings.filter(':checked').attr('checked', false);
});

<强> DEMO

但是，如果用户决定禁用JS，他们可以选择多个，这样您就可以做出决定。

在HTML中检查复选框/收音机=“已选中”，但它看起来未选中

6 个答案: