Javascript 如何检查一个分区中的所有单选按钮是否都已选中?
我正在对一个代码进行加权,用户将在其中为他们所问的问题选择答案。 每页将有多个问题。我希望所有这些问题都能得到回答。 下面是问题表单的代码,在循环中从数据库动态调用问题Javascript 如何检查一个分区中的所有单选按钮是否都已选中?,javascript,jquery,html,Javascript,Jquery,Html,我正在对一个代码进行加权,用户将在其中为他们所问的问题选择答案。 每页将有多个问题。我希望所有这些问题都能得到回答。 下面是问题表单的代码,在循环中从数据库动态调用问题 <form id="radio-demo" class="radio-demo" action="<?php echo get_site_url(); ?>/register-response" method="POST"> <?php /* print_r($categories); */
<form id="radio-demo" class="radio-demo" action="<?php echo get_site_url(); ?>/register-response" method="POST">
<?php
/* print_r($categories); */
/*loop to get questions for each categories*/
foreach($cat as $categories){
$software = $wpdb->get_results("SELECT * FROM ". $wpdb->prefix ."statement where statement_category_id =".$categories->statement_category_id);
$j++;
$table = $software;
$c_id = $categories->statement_category_id;
$i = 0;
?>
<div class="custom_hide" id="page_<?php echo $j;?>">
<?php
$cat_name = $categories->statement_category;
/*loop for the number of questions per category */
foreach($table as $software) {
$i++;
?>
<div class="question_one">
<p><?php echo $i.". ".$software->statement;?></p>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="first-choice-<?php echo $i;?>" value="<?php echo 1*$software->weight;?>" required = "required"/>
<label for="first-choice">1</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="second-choice-<?php echo $i;?>" value="<?php echo 2*$software->weight;?>" required = "required"/>
<label for="second-choice">2</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="third-choice-<?php echo $i;?>" value="<?php echo 3*$software->weight;?>" required = "required"/>
<label for="third-choice">3</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="four-choice-<?php echo $i;?>" value="<?php echo 4*$software->weight;?>" required = "required"/>
<label for="four-choice">4</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="five-choice-<?php echo $i;?>" value="<?php echo 5*$software->weight;?>" required = "required"/>
<label for="five-choice">5</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="six-choice-<?php echo $i;?>" value="<?php echo 6*$software->weight;?>" required = "required"/>
<label for="six-choice">6</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="seven-choice-<?php echo $i;?>" value="<?php echo 7*$software->weight;?>" required = "required"/>
<label for="seven-choice">7</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="eight-choice-<?php echo $i;?>" value="<?php echo 8*$software->weight;?>" required = "required"/>
<label for="eight-choice">8</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="nine-choice-<?php echo $i;?>" value="<?php echo 9*$software->weight;?>" required = "required"/>
<label for="nine-choice">9</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="ten-choice-<?php echo $i;?>" value="<?php echo 10*$software->weight;?>" required = "required"/>
<label for="ten-choice">10</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="eleven-choice-<?php echo $i;?>" value="<?php echo 0*$software->weight;?>" required = "required"/>
<label for="eleven-choice">No Opinion</label>
</label>
<!-- <input type="hidden" name="currentID" value="<?php echo $c_id; ?>" />-->
</div> <?php }?>
<div class="bottum_btn">
<div class="">
<?php if($j > 1){?>
<div class="back_btn">
<a onclick="custom_back(<?php echo $j-1;?>)"><i class="fa fa-chevron-circle-left">Back</i> </a>
</div>
<?php
}
if($j == $catcount){?>
<div class="next_btn">
<input name="submit" type="submit" id="submit_btn" value="submit""><i class="fa fa-chevron-circle-right"></i></input>
</div>
<!--<a name="submit" id="submit_btn" onClick="PopUp()">submit<i class="fa fa-chevron-circle-right"></i>
</a>-->
<?php } else
{
?>
<div class="next_btn">
<a onclick="custom_next(<?php echo $j+1;?>)">Next<i class="fa fa-chevron-circle-right"></i> </a>
</div><?php
}?>
</div>
</div>
</div>
<?php }?>
但此脚本正在检查“是否选中了任何单选按钮组”,我希望选中所有单选按钮组。首先查找表单中的所有单选按钮组
var radio_groups = [];
$("#radio-demo :radio").each(function(){
radio_groups.push(this.name);
});
现在遍历所有这些选项,看看是否有一个未被选中
var isAnyUnselected = radio_groups.filter( function(vallue){
return $(":radio[name='"+group+"']:checked").length == 0
} ).length > 0;
检查
isAnyUnselected
是否为true
(部分未选中)或false
(全部选中)首先查找表单中的所有单选按钮组
var radio_groups = [];
$("#radio-demo :radio").each(function(){
radio_groups.push(this.name);
});
现在遍历所有这些选项,看看是否有一个未被选中
var isAnyUnselected = radio_groups.filter( function(vallue){
return $(":radio[name='"+group+"']:checked").length == 0
} ).length > 0;
检查isAnyUnselected
是否为true
(部分未选中)或false
(全部选中)
但是这个脚本正在检查“是否选中了任何单选按钮组”,我希望检查所有单选按钮组
您需要做的是检查是否至少有一个未选中的收音机框。小例子:
<input class="ans" type="radio"/>
<input class="ans" type="radio"/>
if ($('.ans').not(':checked').length)
{
console.log('At least one not checked, please check all');
}
else
{
console.log('All checked');
}
if($('.ans').not(':checked').length)
{
console.log('至少有一个未选中,请全部选中');
}
其他的
{
console.log(“全部选中”);
}
但是这个脚本正在检查“是否选中了任何单选按钮组”,我希望检查所有单选按钮组
您需要做的是检查是否至少有一个未选中的收音机框。小例子:
<input class="ans" type="radio"/>
<input class="ans" type="radio"/>
if ($('.ans').not(':checked').length)
{
console.log('At least one not checked, please check all');
}
else
{
console.log('All checked');
}
if($('.ans').not(':checked').length)
{
console.log('至少有一个未选中,请全部选中');
}
其他的
{
console.log(“全部选中”);
}
如果不想更改html,可以使用选择器jQuery(“input[type='radio']:not(:checked)”)
如果此选择器的.length
大于1,则需要检查一些输入。简单示例se控制台日志
否则,您可以使用required属性如果您不想更改html,您可以使用选择器
jQuery(“input[type='radio']:not(:checked)”)
如果此选择器的.length
大于1,则需要检查一些输入。简单示例se控制台日志
否则,您可以使用required属性我已经分析了您的代码,并为您的脚本开发了此代码。此脚本检查是否选中了任何问题选项
function custom_next(val) {
var val1 = "#page_" + val;
var val2 = "#page_" + (val - 1);
var i = 0;
var j = 0;
jQuery('div.custom_show input[type=radio]').each(function(){
var status = jQuery(this).is(':checked');
//alert(status);
i=i+1;
if(status == true){
j=j+1;
}
});
i= i/11;
if(i == j){
jQuery(val1).removeClass("custom_hide");
jQuery(val1).addClass("custom_show");
jQuery(val2).removeClass("custom_show");
jQuery(val2).addClass("custom_hide");
}else{
alert("All Questions are mandetory!!");
}
}
我已经分析了您的代码,并为您的脚本开发了此代码。此脚本检查是否选中了任何问题选项
function custom_next(val) {
var val1 = "#page_" + val;
var val2 = "#page_" + (val - 1);
var i = 0;
var j = 0;
jQuery('div.custom_show input[type=radio]').each(function(){
var status = jQuery(this).is(':checked');
//alert(status);
i=i+1;
if(status == true){
j=j+1;
}
});
i= i/11;
if(i == j){
jQuery(val1).removeClass("custom_hide");
jQuery(val1).addClass("custom_show");
jQuery(val2).removeClass("custom_show");
jQuery(val2).addClass("custom_hide");
}else{
alert("All Questions are mandetory!!");
}
}
不要使用
id
,而是尝试对所有不同的名称使用name selector
<代码>$(“[name='inputName']”)。是(“:checked”)。请尝试对所有不同的名称使用名称选择器,而不是使用id
<代码>$(“[name='inputName']”。是否(“:选中”)
。此代码中的无线电演示用于什么?是包含所有单选按钮组的分区的id吗@gurvinder372@VijayPatelradio demo是您表单的id。是的,这包含了所有单选按钮组。在这段代码中,单选按钮演示用于什么?是包含所有单选按钮组的分区的id吗@gurvinder372@VijayPatelradio demo是您表单的id。是的,这包含所有单选按钮组谢谢,这个脚本正是我想要的。谢谢,这个脚本正是我想要的。