为什么我的单选按钮不起作用？我必须按下按钮左侧才能选择它。为什么呢？
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>jQuery Validation Error Placement for Semantic-UI</title>
<link href="/static/css/generic_in.css?newsvgindia.393932601812558191" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
type="text/css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Customer Service</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" enctype="application/x-www-form-urlencoded"
action="/account/do_login" method="post">
<div class="form-group">
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<!--
<div class="ui grid">
<div class="row">
<div class="twelve wide column">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;"
href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be
published
for a period
of 60 days. Thanks for using our site!
</div>
</div>
</div>
</div>
</div>
-->
<div class="ui text container">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;"
href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be
published
for a period
of 60 days. Thanks for using our site!
</div>
</div>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgIYJDA" name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column required field">
<label>Type</label>
</div>
<div class="twelve wide column">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad" name="company_ad" value="0">
<label>Private</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad2" name="company_ad" value="1">
<label>Company</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Email</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Email">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<label>Phone</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="example-id" type="checkbox" checked>
<label for="example-id">Display my phone number on site</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Place</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown"
onchange="cities(this);document.getElementById('area').display='';"
name="region" id="region">
<option value="">«Choose state»</option>
<option value="7089183">
Alabama
</option>
</select>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="required field">
<label>City</label>
</div>
</div>
<div class="twelve wide column">
<div id="cities" class="column field">
<select class="ui dropdown"
onchange="cities(this);document.getElementById('area').display='';"
name="region" id="region">
<option value="">«Choose city»</option>
</select>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Category</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown" name="category_group" id="category_group" sel_id="">
<option value="0" selected="selected">«All categories
»
</option>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Type</label>
</div>
<div class="twelve wide column">
<div id="type_container" class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>For sale</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>Wanted</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid" id="category_contents">
<div class="four wide column required field">
<label>Title</label>
</div>
<div class="twelve wide column">
<input type="text" name="title" placeholder="Last Name">
</div>
<div class="four wide column required field">
<label><label for="text">Ad text</label></label>
</div>
<div class="twelve wide column">
<textarea cols="45" id="text" name="text" placeholder="Please describe the product or service in a few simple sentences" rows="10"></textarea>
</div>
<div class="four wide column ">
<label> Price</label>
</div>
<div class="twelve wide column">
<div class="input-group">
<span class="input-group-addon">
Rs
</span>
<input type="text" name="price" class="form-control"
aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.
00</span>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image1" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image2a" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image3" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image4" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image5" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Terms</label>
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="terms" type="checkbox" checked>
<label for="terms">I agree to the Terms and Conditions</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div class="ui error message"></div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div id="loading" class="progressBar">
<div class="ui active inline loader"></div>
Waiting for response<span id="loading_dots"></span></div>
<button name="validate" type="submit" class="btn btn-success btn-lg"
onclick="showProgressBar();">
Continue
</button>
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
v>
</body>
</html>
答案 0 :(得分：3)
您的单选按钮不起作用，因为您隐藏了无线电以将标签用作样式单选按钮。为了使这些工作正常，您需要通过执行以下操作将标签与其所用的无线电相关联：
<label for="id_of_radio">text</label>
因此，在私人单选按钮的示例中，您可以将标签更改为：
<label for="c_ad">Private</label>
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>jQuery Validation Error Placement for Semantic-UI</title>
<link href="/static/css/generic_in.css?newsvgindia.393932601812558191" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Customer Service</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" enctype="application/x-www-form-urlencoded" action="/account/do_login" method="post">
<div class="form-group">
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<!--
<div class="ui grid">
<div class="row">
<div class="twelve wide column">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;"
href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be
published
for a period
of 60 days. Thanks for using our site!
</div>
</div>
</div>
</div>
</div>
-->
<div class="ui text container">
<div class="ui menu">
<a class="item" href="/">
HOME
</a>
<a class="header item" style="color:black;;font-size:14px;" href="/ai">
INSERT AD
</a>
<a class="item" style="color:black;;font-size:14px;" href="/">
SEARCH FOR ADS
</a>
<a class="item" style="color:black;;font-size:14px;" href="/customer_service.htm">
CUSTOMER
SERVICE</a>
</div>
<div class="ui ignored positive icon message">
<i class="edit icon"></i>
<div class="content">
<h3 class="header">Insert Ad</h3>
Your ad will be reviewed according to the rules of our site. After approval, it will be published for a period of 60 days. Thanks for using our site!
</div>
</div>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgIYJDA" name="formular" class="ui form">
<div class="ui grid">
<div class="four wide column required field">
<label>Type</label>
</div>
<div class="twelve wide column">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad" name="company_ad" value="0">
<label for="c_ad">Private</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="c_ad2" name="company_ad" value="1">
<label for="c_ad2">Company</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Email</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Email">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<label>Phone</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column">
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="example-id" type="checkbox" checked>
<label for="example-id">Display my phone number on site</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Place</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown" onchange="cities(this);document.getElementById('area').display='';" name="region" id="region">
<option value="">«Choose state»</option>
<option value="7089183">
Alabama
</option>
</select>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="required field">
<label>City</label>
</div>
</div>
<div class="twelve wide column">
<div id="cities" class="column field">
<select class="ui dropdown" onchange="cities(this);document.getElementById('area').display='';" name="region" id="region">
<option value="">«Choose city»</option>
</select>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column required field">
<label>Category</label>
</div>
<div class="twelve wide column">
<select class="ui dropdown" name="category_group" id="category_group" sel_id="">
<option value="0" selected="selected">«All categories »
</option>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Type</label>
</div>
<div class="twelve wide column">
<div id="type_container" class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>For sale</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>Wanted</label>
</div>
</div>
</div>
</div>
</div>
<div class="ui grid" id="category_contents">
<div class="four wide column required field">
<label>Title</label>
</div>
<div class="twelve wide column">
<input type="text" name="title" placeholder="Last Name">
</div>
<div class="four wide column required field">
<label>
<label for="text">Ad text</label>
</label>
</div>
<div class="twelve wide column">
<textarea cols="45" id="text" name="text" placeholder="Please describe the product or service in a few simple sentences" rows="10"></textarea>
</div>
<div class="four wide column ">
<label>Price</label>
</div>
<div class="twelve wide column">
<div class="input-group">
<span class="input-group-addon">
Rs
</span>
<input type="text" name="price" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.
00</span>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image1" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image2a" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image3" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image4" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image5" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Terms</label>
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="terms" type="checkbox" checked>
<label for="terms">I agree to the Terms and Conditions</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div class="ui error message"></div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div id="loading" class="progressBar">
<div class="ui active inline loader"></div>
Waiting for response<span id="loading_dots"></span>
</div>
<button name="validate" type="submit" class="btn btn-success btn-lg" onclick="showProgressBar();">
Continue
</button>
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
v>
</body>
</html>
如果对所有标签执行此操作（将它们与相应的输入相关联），则表示当您单击标签时，它将关注输入
答案 1 :(得分：1)
您的单选按钮标记似乎已关闭。你应该试试这个：
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
此处有更多示例：http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
答案 2 :(得分：0)
您正在隐藏单选按钮并使用您自己的CSS表示它们。
这就是为什么只有当您点击隐藏的<input type="radio">时才会选中单选按钮。 （尝试在开发工具和测试中取消选中<input type="radio">的不透明度）
您可能有理由这样做，但这不是一个好习惯。此外，<input type="radio">代码也必须位于<label>内，以便即使您点击文字也可以选择它。
但是，在你的情况下，看起来好像在里面移动输入无线电标签会破坏你的造型。
如果您可以控制id属性，则替代方法是为与相应输入标记对应的标签提供for属性，
<input type="radio" id="c_ad" name="company_ad" value="0" dcvalue="0">
<label for="c_ad">Private</label>
<input type="radio" id="c_ad2" name="company_ad" value="1" dcvalue="1">
<label for="c_ad2">Company</label>