0

ユーザーがチェックボックスを 1 つしか選択できないようにしようとしていますが、何もチェックされていないようです。私は何を間違っていますか？

<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では、チェックされた属性が変更されるようです。

4

6 に答える 6

0

チェックボックスのグループ内で 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;      
}

ここにデモがあります

于 2013-04-10T10:55:20.107 に答える
0

いくつかの基本的な 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>

あなたのスタイルシートに何か問題があると思いますか?

于 2013-04-10T10:59:48.130 に答える
0

ラジオを使用してチェックボックスの機能を模倣するよりも、チェックボックスを使用してラジオボタンの機能を模倣する方が、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);
});

デモ

ただし、ユーザーが JS を無効にすることを決定した場合は、複数を選択できるようになるため、それを決定する必要があります。

于 2013-04-10T14:35:18.353 に答える