Javascript 选中复选框时如何将“选择”值更改为特定值_Javascript_Jquery_Html_Forms

Javascript 选中复选框时如何将“选择”值更改为特定值

javascript jquery html forms

Javascript 选中复选框时如何将“选择”值更改为特定值,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,这是一个很小的装置。假设颜色和型号的标准值分别为绿色和v1 主要概念是，当我选中Select all to standard复选框时，所有选择下拉列表都应更改为其标准值（green和v1）如果我选择标准以外的任何选项，如红色和v1（其中一个为非标准）或红色和v2（两者均为非标准），则复选框将自动显示在自定义复选框中我怎样才能做到这一点？提前谢谢你的建议以下是片段： $（函数（）{ $（“#标准”）。更改（函数（）{ var item=this.checked？绿色“：”； $（“#颜色”

这是一个很小的装置。假设颜色和型号的标准值分别为

绿色

和

v1

主要概念是，当我选中

Select all to standard

复选框时，所有选择下拉列表都应更改为其标准值（

green

和

v1

）

如果我选择标准以外的任何选项，如

红色

和

v1

（其中一个为非标准）或

红色

和

v2

（两者均为非标准），则复选框将自动显示在

自定义

复选框中

我怎样才能做到这一点？提前谢谢你的建议

以下是片段：

$（函数（）{
$（“#标准”）。更改（函数（）{
var item=this.checked？绿色“：”；
$（“#颜色”）.val（项目）；
var项=此项。选中“v1”：；
$（“#模型”）.val（项目）；
});
});

选择“全部到标准”

自定义

颜色
选择一个
红色
绿色
模型
选择一个
版本1
版本2
你可以用它来实现你的目标。如果你还需要什么，请在这里发表评论


Trst
选择“全部到标准”

自定义

颜色
选择一个
红色
绿色
模型
选择一个
版本1
版本2
$（函数（）{
$（“.selectOptions”）。单击（函数（）{
if（$（this.attr（'id'）=“标准”）{
$（“#自定义”）.prop（'checked'，false）；
$（“选择颜色”）.val（“绿色”）；
$（“选择模型”）.val（“v1”）；
}否则{
$（“#自定义”）.prop（'checked'，true）；
$（“#标准”）.prop（'checked'，false）；
}		
});
$（“选择”）.change（函数（）{
if（this.value！=“绿色”| | this.value！=“v1”）{
$（“#自定义”）.prop（'checked'，true）；
$（“#标准”）.prop（'checked'，false）；
} 
});
});
有一些建议，比如使用单选框而不是复选框，并使用CSS更改UI
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>


<div class='col-sm-3'>
<input type="radio" name="check_value" id="standard" class="checkbox_event" value="all">Select all to standard<br>
<input type="radio" name="check_value" id="custom_box" class="checkbox_event" value="custom">Custom<br>
</div>
<div class='col-sm-3'>
<div class="form-group">
  <label>Color</label>
  <select id="color" name="color" class="select_list form-control">
     <option value="">Select one</option>
     <option value="red">Red</option>
     <option value="green">Green</option>
  </select>
</div>
<div class="form-group">
  <label>Model</label>
  <select id="model" name="model" class="form-control select_list">
     <option value="">Select one</option>
     <option value="v1">Version 1</option>
     <option value="v2">Version 2</option>
   </select>
 </div>
</div>

<script type="text/javascript">
$(document).ready(function(e){

    var my_array = new Array('v2','red');

    $("#standard").change(function() {
        var item = this.checked ? "green" : "";
        $("#color").val(item);
        var item = this.checked ? "v1" : "";
        $("#model").val(item);
    });


    $(".select_list").change(function(e) {
        if( ($.inArray($('#color').val(), my_array) == -1) && ($.inArray($('#model').val(), my_array)  == -1 )){
            $('#custom_box').prop('checked',false);
            $('#standard').prop('checked',true);
        }else if( ($.inArray($('#color').val(), my_array) == -1) || ($.inArray($('#model').val(), my_array)  == -1 )){
            $('#custom_box').prop('checked',true);
            $('#standard').prop('checked',false);
        }else{
            $('#custom_box').prop('checked',false);
            $('#standard').prop('checked',true);
        }
    });

 });
</script>
</body>
</html>


选择“全部到标准”

自定义

颜色
选择一个
红色
绿色
模型
选择一个
版本1
版本2
$（文档）.ready（函数（e）{
var my_array=新数组（'v2'，'red'）；
$（“#标准”）。更改（函数（）{
var item=this.checked？绿色“：”；
$（“#颜色”）.val（项目）；
var项=此项。选中“v1”：；
$（“#模型”）.val（项目）；
});
$（“.select_list”）.change（函数（e）{
if（$.inArray（$（'#color'）.val（），我的数组）=-1）和（$.inArray（$（'#model'）.val（），我的数组）=-1））{
$（“#自定义_框”）.prop（'checked'，false）；
$（“#标准”）.prop（'checked'，true）；
}else if（$.inArray（$（'.#color'）.val（），我的数组）=-1）| |（$.inArray（$（'.#model'）.val（），我的数组）=-1））{
$（“#自定义_框”）.prop（'checked'，true）；
$（“#标准”）.prop（'checked'，false）；
}否则{
$（“#自定义_框”）.prop（'checked'，false）；
$（“#标准”）.prop（'checked'，true）；
}
});
});
您尝试的JavaScript在哪里？感觉这些复选框应该是单选按钮。@j08691，很抱歉，我没有在我尝试的第一个位置添加它。我不确定我是否做得对。我已经更新了我尝试过的内容。我无法理解自定义部分。而且也不确定这是否是我现在做这件事的最好方式。谢谢。谢谢@JosephMarikle的建议，但我需要这里的复选框，因为我打算在真实页面中使用它执行一些额外的操作。所以，我想我必须保留复选框。哇！谢谢你的建议。我真的很感激你的努力。我认为这足够满足我目前的所有需要。：）嗨@fatih，我能请你帮个忙吗？我一直试图在我的页面上实现它，但由于某些原因，它在stackoverflow之外无法工作。这是您版本的链接。你能帮我把你的答案编一个小链接吗？谢谢。你好@Ashonko使用此链接。我也更新了我的答案再次感谢。如果你不介意的话，你能解释一下上次为什么没用吗？我只是想了解一下。谢谢@waseem的建议，但我需要复选框，因为我打算在真实页面中使用它执行一些额外的操作。所以，我想我必须保留复选框。无论如何，感谢您在这个建议上的努力。：）