Question

我的当前设置包括单选按钮，选中后，根据选择的单选按钮，将下载所选的无线电按钮文件。

<input type="radio" name="download" id="x86"/>winrar x86 <br /> <input type="radio" name="download" id="x64"/>winrar x64 <br /> <input type="button" id="download" value="download"/>

var radio_x86 = document.getElementById('x86');
var radio_x64 = document.getElementById('x64');

var button = document.getElementById('download');

button.onclick = downloadFile;

function downloadFile() {
    if(radio_x86.checked) {
        window.open("http://www.rarlab.com/rar/wrar500.exe");
    }else if(radio_x64.checked) {
        window.open("http://www.rarlab.com/rar/winrar-x64-500.exe");
    } else {
        alert("Please check one of the options first.");
    }
}

Fiddle example

但是，我想使用FontAwesome更多地设置单选按钮的样式。此代码可用于将FontAwesome应用于我的单选按钮：

<label for="animal-kitty">
  <input type="radio" name="animal" id="animal-kitty" value="kitty" />
  <span>Option 1</span>
</label>
<label for="animal-doggie">
  <input type="radio" name="animal" id="animal-doggie" value="doggie" />
  <span>Option 2</span>
</label>
<label for="animal-fishie">
  <input type="radio" name="animal" id="animal-fishie" value="fishie" />
  <span>Option 3</span>
</label>

input[type="radio"] {
  display: none;
}

input[type="radio"] + span:before {
  font-family: 'FontAwesome';
  padding-right: 3px;
  font-size: 20px;
  color: #777777;
}

input[type="radio"] + span:before {
  content: "\f10c";
  /* circle-blank */
}

input[type="radio"]:checked + span:before {
  content: "\f058";
  /* circle */
}

Fiddle example here

问题：如何将这两者结合起来，以便我可以使用程式化的单选按钮，并且仍然有单选按钮，选中后会下载文件？

Answer 1

很简单。包括所需资源和复制样式。

Updated fiddle.

Do not repeat yourself version :)

input[type="radio"],
input[type="checkbox"] {
  display:none;
}

input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: 'FontAwesome';
  padding-right: 3px;
  font-size: 20px;
}

input[type="radio"] + span:before {
  content: "\f10c"; /* circle-blank */
}

input[type="radio"]:checked + span:before {
  content: "\f058"; /* circle */
}

input[type="checkbox"] + span:before {
  content: "\f058"; /* check-empty */
}

input[type="checkbox"]:checked + span:before {
  content: "\f058"; /* check */
}

选中时使用FontAwesome单选按钮下载文件

1 个答案: