我正在为 WordPress 设置主题构建器，但在保存单选按钮时遇到问题。
我有一个单选按钮，您可以使用它选择例如标题的布局。
当您选择它时，它会获得属性 checked=checked，该组中的其他人会删除其选中属性。这有效。
但是当我去组装将包含所有已保存选项的对象时，布局名称始终是默认名称。
如果我没有按照我的方式设置它，那么无论我选择什么，最后一个单选按钮名称总是被选为布局。代码如下所示
function builder_hb_save(e) {
e.preventDefault();
var builder_hb_out = {};
$('#builder_hb_headers').find('li').each(function() {
var $builder_hb_header = $(this);
var li_id = $builder_hb_header.attr('id');
builder_hb_out[li_id] = {};
builder_hb_out[li_id]['title'] = $builder_hb_header.find('.builder_hb_header_title').val();
builder_hb_out[li_id]['settings'] = {};
if ($('.builder_header_layout_single').data('default') === 1) {
var default_layout = $('.builder_header_layout_single').find('input').val();
}
$builder_hb_header.find('.builder_hb_setting').each(function() {
var $builder_hb_setting = $(this);
if (!$builder_hb_setting.parents('.builder_options_wrapper').hasClass('hidden')) {
var builder_hb_setting_name = $builder_hb_setting.attr('name');
// Problem starts here
if ('builder_hb_header_layout' !== builder_hb_setting_name) { // save value for non header values - if only this is set, then the value for header is always the last one, no matter the select
builder_hb_out[li_id]['settings'][builder_hb_setting_name] = $builder_hb_setting.val();
} else { // Here the checked option should be selected, but it's not
if ('checked' === $builder_hb_setting.attr('checked') && 'undefined' !== typeof $builder_hb_setting.attr('checked')) {
builder_hb_out[li_id]['settings']['builder_hb_header_layout'] = $builder_hb_setting.val();
} else {
builder_hb_out[li_id]['settings']['builder_hb_header_layout'] = default_layout;
}
}
}
});
});
console.dir(builder_hb_out);
}
$('#save_all').on('click', builder_hb_save);.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="builder_hb_headers" class="builder_builder_settings">
<li class="show" id="ui-id-1">
<div class="header_header_settings">
<div class="header_title">
<input type="radio" id="default_radio_1" name="builder_hb_default" value="0" class="builder_hb_setting builder_builder_default builder_hb_default">
<label for="default_radio_1" class="default_label">
</label>New Header456</div>
<span class="collapse_item">
</span>
</div>
<div class="builder_options_wrapper builder_header_title builder_builder_title">
<h4>Header Title</h4>
<div class="value_container">
<input type="text" name="builder_hb_header_title" value="New Header456" class="builder_hb_header_title">
</div>
</div>
<div class="builder_options_wrapper builder_header_layout builder_builder_layout">
<h4>Header Layout</h4>
<div class="value_container">
<label class="builder_header_layout_single" data-default="1" data-settings=".builder_logo_img, .builder_logo_retina_img, .builder_header_retina_width, .builder_header_retina_height, .builder_background_img, .builder_background_color, .builder_text_color, .builder_icon_select, .builder_header_menu_first, .builder_header_menu_second, .builder_hover_text_color, .builder_transparent_logo_img, .builder_transparent_logo_retina_img, .builder_transparent_header_retina_width, .builder_transparent_header_retina_height, .builder_transparent_text_color, .builder_hover_transparent_text_color">
<input type="radio" name="builder_hb_header_layout" value="header_layout_logo_centered" class="builder_hb_header_layout builder_hb_setting">
<img src="wp-content/themes/builder/inc/theme-settings/images/header3.png" alt="header_layout_logo_centered" title="header_layout_logo_centered">
</label>
<label class="builder_header_layout_single" data-default="" data-settings=".builder_header_menu_first, .builder_header_retina_height, .builder_background_img, .builder_background_color, .builder_icon_select">
<input type="radio" name="builder_hb_header_layout" value="header_layout_logo_left_fixed" class="builder_hb_header_layout builder_hb_setting" checked="checked">
<img src="wp-content/themes/builder/inc/theme-settings/images/header2.png" alt="header_layout_logo_left_fixed" title="header_layout_logo_left_fixed">
</label>
<label class="builder_header_layout_single" data-default="" data-settings=".builder_header_menu_first, .builder_logo_img, .builder_header_retina_height, .builder_background_img">
<input type="radio" name="builder_hb_header_layout" value="header_layout_logo_left_magic_background" class="builder_hb_header_layout builder_hb_setting">
<img src="wp-content/themes/builder/inc/theme-settings/images/header1.png" alt="header_layout_logo_left_magic_background" title="header_layout_logo_left_magic_background">
</label>
</div>
</div>
<div class="builder_options_wrapper builder_header_menu_first hidden">
<h4>Select Menu</h4>
<div class="value_container">
<select class="builder_hb_setting builder_header_menu_first" name="builder_hb_header_menu_first">
<option value="header-menu-default">Header Menu Default</option>
<option value="header-menu-left">Centered Logo - Menu Left</option>
<option value="header-menu-right">Centered Logo - Menu Right</option>
<option value="proba">Proba</option>
</select>
</div>
</div>
<div class="builder_options_wrapper builder_header_menu_second hidden">
<h4>Select Second Menu</h4>
<div class="value_container">
<select class="builder_hb_setting builder_header_menu_second" name="builder_hb_header_menu_second">
<option value="header-menu-default">Header Menu Default</option>
<option value="header-menu-left">Centered Logo - Menu Left</option>
<option value="header-menu-right">Centered Logo - Menu Right</option>
<option value="proba">Proba</option>
</select>
</div>
</div>
<div class="builder_options_wrapper builder_logo_img hidden">
<h4>Logo</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_logo" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" name="remove_image_upload" value="Remove Image" class="button remove_image_button">
</div>
</div>
<div class="builder_options_wrapper builder_logo_retina_img hidden">
<h4>Retina Logo</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_logo_retina" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo_retina">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" class="button remove_image_button" name="remove_image_upload" value="Remove Image">
</div>
</div>
<div class="builder_options_wrapper builder_header_retina_width hidden">
<h4>Retina Width</h4>
<div class="value_container">
<input type="text" name="builder_hb_header_retina_width" value="" class="builder_hb_setting">
</div>
</div>
<div class="builder_options_wrapper builder_header_retina_height">
<h4>Retina Height</h4>
<div class="value_container">
<input type="text" name="builder_hb_header_retina_height" value="" class="builder_hb_setting">
</div>
</div>
<div class="builder_options_wrapper builder_background_img builder_hb_switch">
<h4>Background Image</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_background_image" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo_retina">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" class="button remove_image_button" name="remove_image_upload" value="Remove Image">
</div>
</div>
<div class="builder_options_wrapper builder_background_color builder_hb_switch">
<h4>Background Color</h4>
<div class="value_container">
<div class="wp-picker-container">
<a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
</a>
<span class="wp-picker-input-wrap">
<input type="text" name="builder_hb_background_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
</span>
<div class="wp-picker-holder">
</div>
</div>
</div>
</div>
<div class="builder_options_wrapper builder_text_color builder_hb_switch hidden">
<h4>Text Color</h4>
<div class="value_container">
<div class="wp-picker-container">
<a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
</a>
<span class="wp-picker-input-wrap">
<input type="text" name="builder_hb_text_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
</span>
<div class="wp-picker-holder">
</div>
</div>
</div>
</div>
<div class="builder_options_wrapper builder_hover_text_color builder_hb_switch hidden">
<h4>Hover Text Color</h4>
<div class="value_container">
<div class="wp-picker-container">
<a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
</a>
<span class="wp-picker-input-wrap">
<input type="text" name="builder_hb_hover_text_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
</span>
<div class="wp-picker-holder">
</div>
</div>
<p class="description">Color for hover and current menu items.</p>
</div>
</div>
<div class="builder_options_wrapper builder_transparent_logo_img builder_hb_switch hidden">
<h4>Transparent Logo</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_transparent_logo" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" name="remove_image_upload" value="Remove Image" class="button remove_image_button">
</div>
</div>
<div class="builder_options_wrapper builder_transparent_logo_retina_img builder_hb_switch hidden">
<h4>Transparent Logo Retina Logo</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_transparent_logo_retina" value="" class="builder_image_upload builder_hb_setting builder_hb_header_transparent_logo_retina">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" class="button remove_image_button" name="remove_image_upload" value="Remove Image">
</div>
</div>
<div class="builder_options_wrapper builder_transparent_header_retina_width builder_hb_switch hidden">
<h4>Transparent Retina Width</h4>
<div class="value_container">
<input type="text" name="builder_hb_transparent_header_retina_width" value="" class="builder_hb_setting">
</div>
</div>
<div class="builder_options_wrapper builder_transparent_header_retina_height builder_hb_switch hidden">
<h4>Transparent Retina Height</h4>
<div class="value_container">
<input type="text" name="builder_hb_transparent_header_retina_height" value="" class="builder_hb_setting">
</div>
</div>
<div class="builder_options_wrapper builder_transparent_text_color builder_hb_switch hidden">
<h4>Transparent Text Color</h4>
<div class="value_container">
<div class="wp-picker-container">
<a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
</a>
<span class="wp-picker-input-wrap">
<input type="text" name="builder_hb_transparent_text_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
</span>
<div class="wp-picker-holder">
</div>
</div>
</div>
</div>
<div class="header_footer_settings">
<span class="builder_builder_delete">Delete</span>
<a href="#" class="builder_hb_save">Save</a>
</div>
</li>
</ul>
<div id="save_all">SAVE ALL</div>这就是简而言之的代码，有一些函数可以切换可见性和检查属性，但这一个让我发疯，我看不出我做错了什么。
最佳答案
要检查复选框是否为您应该使用 .is()与 :checked 选择器一起使用或使用 .prop()方法而不是 .attr()
使用这些将返回true/false
$builder_hb_setting.is(':checked');
$builder_hb_setting.prop('checked');
关于javascript - 选中的选项未正确保存，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39326192/