Question

我有2个单选按钮和一个复选框。

当第一个选项为“个性化”时，应自动选中“隐藏”复选框。

<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
      <label for="edit-field-main-download-category-und">Main Download Category </label>
     <div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
     <input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" />  <label class="option" for="edit-field-main-download-category-und-general">General </label>

    </div>
    <div class="form-item form-type-radio form-item-field-main-download-category-und">
     <input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" />  <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>

    </div>
    </div>
    </div>
    </div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
     <input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" />  <label class="option" for="edit-field-hidden-und">Hidden </label>

    </div></div>

我已经制作了这个剧本，但它不起作用：

jQuery(document).ready(function () {
  if ( $('.personalized input').val() = "personalized" ) {
    $('.checkbox input').attr('checked');
  }
});

Answer 1

你几乎没有问题。正如其他人已经指出的那样，您正在检查document.ready而不是onChange事件。因此它检查页面加载，而不是检查单选按钮状态更改。另一个问题是您正在检查$('.personalized input')值，但您的html中没有personalized类。您的单选按钮具有公共类form-radio。所以你可以把它用作选择器。

＆＃13;

$('.form-radio').on("change", function(){
  if ( $(this).val() == "personalized" ) {
    $('.form-checkbox').prop('checked', true);
  }
  else{
    $('.form-checkbox').prop('checked', false);
  }
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
      <label for="edit-field-main-download-category-und">Main Download Category </label>
     <div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
     <input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" />  <label class="option" for="edit-field-main-download-category-und-general">General </label>

    </div>
    <div class="form-item form-type-radio form-item-field-main-download-category-und">
     <input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" />  <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>

    </div>
    </div>
    </div>
    </div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
     <input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" />  <label class="option" for="edit-field-hidden-und">Hidden </label>

    </div></div>

＆＃13;

这部分：

else{
    $('.form-checkbox').prop('checked', false);
  }

如果您想取消检查是否未个性化，则只需要。还要注意用于jQuery 1.6+的.prop()。对于较低版本，请使用.attr()

Answer 2

您必须指定何时希望脚本检查是否已选中list_MainId。如果您只使用radio功能，它只会检查一次，当网站加载时，并且由于未选中，因此也不会检查该复选框。

您可以使用以下方法：使用document.ready()按钮上的每个点击事件进行检查。

radio

$('.personalized').click(function() {
  if ($(this).is(':checked')) {
    $('.checkbox').attr('checked', 'checked');
  } 
});

Answer 3

这里有几个问题：

编写的代码仅在页面加载时运行。由于您说您希望“自动”选中复选框，因此您应该将更改处理程序附加到无线电阵列。
.val()将返回所选集合中第一个元素的值，无论选中哪个元素。您需要将:checked添加到选择器以过滤到所选的一个无线电元素。
您的单个等号是赋值运算符，应替换为===。
.attr('checked')返回checked属性的值。这里实际上有两个问题：attr只查看最初分配给元素的属性;您需要使用prop来更新已检查的属性。第二个问题是单参数attr函数用于读取属性。您需要双参数功能来设置它。

这是一个有效的例子：

jQuery(document).ready(function () {
  $('input[name="radio"]').on('change',function(){
    if ( $('input[name="radio"]:checked').val() === "personalized" ) {
      $('#hidden').prop('checked','checked');
    } else {
      $('#hidden').prop('checked','');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" id="personalized" value="personalized"/><label for="personalized">personalized</label><br/>
<input type="radio" name="radio" id="general" value="general"/><label for="general">general</label><br/>
<input type="checkbox" id="hidden" name="hidden"/><label for="hidden">hidden</label>

Answer 4

只需在准备好的功能

中完成

jQuery(document).ready(function () {
  if ($(".personalized").is(":checked") ) {
    $('.checkbox').attr('checked', 'checked');
  }
});

如果您希望它们适用于页面加载。

radiobuttons和条件复选框

4 个答案: